Maison > Article > interface Web > Comment créer une fonction de publication simple en js

Comment créer une fonction de publication simple en js

小云云original: 2018-03-17 16:58:511573parcourir

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>

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>

Observez la partie js ci-dessus :

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

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

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

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;//获取值

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

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

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

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode d'implémentation de chargement d'images de manière asynchrone via jsArticle suivant：Méthode d'implémentation de chargement d'images de manière asynchrone via js

Articles Liés

Voir plus