Comment créer une fonction de publication simple en js-js tutoriel-php.cn

Comment créer une fonction de publication simple en js

小云云

Libérer： 2018-03-17 16:58:51

original

1632 Les gens l'ont consulté

Cet article partage principalement avec vous comment créer une fonction de publication simple en js. Il est principalement partagé avec vous sous forme de code.

Le code est le suivant :

<!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>

Copier après la connexion

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>

Copier après la connexion

Observez la partie js ci-dessus :

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

Copier après la connexion

Ces deux lignes du code ne peut pas être placé Supposons que je mette

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

Copier après la connexion

devant le code suivant. Une fois la page chargée, je commencerai à exécuter les deux lignes de code suivantes. Vous constaterez que la valeur obtenue est. vide, vous devez donc le mettre dans la fonction de clic et cliquer sur le bouton. Ce n'est qu'alors que vous commencerez à obtenir les valeurs dans la zone de saisie et de texte. (Je suppose ici que vous n'avez pas attribué de valeurs à ces deux balises avant d'écrire le code)

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

Copier après la connexion

S'il y a trois autres balises créées :

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

Copier après la connexion

doit être ajouté dans les nœuds HTML.

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

Copier après la connexion

De plus, vous pouvez également effectuer un examen post-version des ajouts, suppressions et modifications. Utilisez votre imagination. Enfin~Merci d'avoir lu cet article~

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!