Home > Article > Web Front-end > How to create a simple publishing function in js

How to create a simple publishing function in js

小云云Original: 2018-03-17 16:58:511573browse

This article mainly shares with you how to create a simple publishing function in js, mainly in the form of code. I hope it can help everyone.

The code is as follows:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            .showMessage{
                background-color: #ccc;
                margin-top: 12px;
                padding:20px;
                border-radius: 8px;
            }
        </style>
    </head>
    <body>
        <p class="container" style="padding-top:50px;">
            <p class="col-md-3 message">
                <input type="" class="form-control" name="" id="inpText" placeholder="请输入标题">
                <textarea class="form-control" rows="10" style="margin-top: 20px" id="textaText" placeholder="请输入内容"></textarea>
                <button class="btn btn-primary" style="margin-top:20px " id="button01">提交</button>
            </p>
            <p class="col-md-9 mainMessage" id="right">
                <p class="showMessage">
                    <i>模板</i>
                    <h3 class="MT">标题</h3>
                    <p class="MC">这里是内容</p>
                </p>
            </p>
        </p>
    </body>
</html>

js:

<script type="text/javascript">
        window.onload = function(){
        $(&#39;#button01&#39;).click(function(){
            var inpText = document.getElementById(&#39;inpText&#39;).value;//获取值
            var textaText = document.getElementById(&#39;textaText&#39;).value;//获取值    
            var right = document.getElementById(&#39;right&#39;);
            var p = document.createElement(&#39;p&#39;);//创建一个p
            p.className = &#39;showMessage&#39;;
            var h3 = document.createElement(&#39;h3&#39;);//创建一个h3
            h3.className = "MT";//设置类名
            p.appendChild(h3);//将h3添加到p
            h3.innerHTML = inpText;
            
            var p = document.createElement(&#39;p&#39;);//创建一个p
            p.innerHTML = textaText;
            p.className = "MC";
            p.appendChild(p);
            right.appendChild(p);
            })
        }
</script>

Observe the above js part:

 var inpText = document.getElementById(&#39;inpText&#39;).value;//获取值
 var textaText = document.getElementById(&#39;textaText&#39;).value;//获取值

These two lines of code cannot be placed in front of the following code

 $(&#39;#button01&#39;).click(function(){}

Assume I put it in front. After the page is loaded, I will start to execute the following two lines of code. I will find that the obtained value is empty, so I need to put it in the click function. Only when the button is clicked will I start to obtain the input and textarea. value. (I assume here that you did not assign values to these two tags before writing the code);

 var inpText = document.getElementById(&#39;inpText&#39;).value;//获取值
 var textaText = document.getElementById(&#39;textaText&#39;).value;//获取值

If there are other three tags created:

 var p = document.createElement(&#39;p&#39;);//创建一个p
 var h3 = document.createElement(&#39;h3&#39;);//创建一个h3
 var p = document.createElement(&#39;p&#39;);//创建一个p

must be added to the HTML node among.

p.appendChild(h3);//将h3添加到p
p.appendChild(p);
right.appendChild(p);

In addition, you can also do a post-release review of additions, deletions, and modifications. Use your imagination. Finally~Thank you for reading this article~

The above is the detailed content of How to create a simple publishing function in js. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implementation method of asynchronously loading images through jsNext article：Implementation method of asynchronously loading images through js

See more

How to create a simple publishing function in js

Related articles