suchen

Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie eine einfache Veröffentlichungsfunktion in js

So erstellen Sie eine einfache Veröffentlichungsfunktion in js

小云云
小云云Original
2018-03-17 16:58:511586Durchsuche

In diesem Artikel erfahren Sie hauptsächlich, wie Sie eine einfache Veröffentlichungsfunktion in js erstellen. Ich hoffe, er kann Ihnen helfen.

Der Code lautet wie folgt:

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

Beachten Sie den js-Teil oben: 

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

Diese beiden Zeilen Der Code kann nicht platziert werden. Angenommen, ich setze 

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

vor den folgenden Code. Nachdem die Seite geladen ist, beginne ich mit der Ausführung der folgenden zwei Codezeilen leer, also müssen Sie es in die Klickfunktion einfügen und auf die Schaltfläche klicken. Erst dann wird begonnen, die Werte im Eingabe- und Textbereich abzurufen. (Ich gehe hier davon aus, dass Sie diesen beiden Tags vor dem Schreiben des Codes keine Werte zugewiesen haben); 

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

Wenn weitere drei Tags erstellt wurden: 

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

in HTML-Knoten eingefügt. 

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

Darüber hinaus können Sie nach der Veröffentlichung auch eine Überprüfung der Hinzufügungen, Löschungen und Änderungen durchführen. Nutzen Sie Ihre Fantasie. Abschließend~Danke, dass Sie diesen Artikel gelesen haben~

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine einfache Veröffentlichungsfunktion in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierungsmethode zum asynchronen Laden von Bildern über jsNächster Artikel：Implementierungsmethode zum asynchronen Laden von Bildern über js

In Verbindung stehende Artikel

Mehr sehen