JavaScript ändert HTML-Seitenelemente dynamisch, z. B. durch Hinzufügen oder Entfernen-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

JavaScript ändert HTML-Seitenelemente dynamisch, z. B. durch Hinzufügen oder Entfernen

May 07, 2018 pm 04:06 PM

html javascript js

In diesem Artikel wird hauptsächlich JavaScript zum dynamischen Ändern von HTML-Seitenelementen wie dem Hinzufügen oder Löschen vorgestellt. Jetzt kann ich es mit Ihnen teilen.

HTML-Seitenelemente Sie können js-Änderungen dynamisch übergeben, Sie können beispielsweise Elemente zu HTML hinzufügen oder ein Element löschen. Interessierte Freunde sollten es sich nicht entgehen lassen

Sie können Elemente in HTML dynamisch ändern JavaScript

Elemente zu HTML hinzufügen

Zuerst müssen Sie ein Tag erstellen, dann den entsprechenden Inhalt zum Tag hinzufügen und dann das erstellte Tag an der entsprechenden Stelle hinzufügen .

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 
&lt;head&gt; 
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt; 
&lt;title&gt;测试文档&lt;/title&gt; 
&lt;script type=&quot;text/javascript&quot;&gt; 
function add(){ 
var element = document.createElement(&quot;p&quot;); 
var node = document.createTextNode(&quot;添加新段落&quot;); 
element.appendChild(node); 
x = document.getElementById(&quot;demo&quot;); 
x.appendChild(element); 
} 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;p id=&quot;demo&quot;&gt; 
&lt;p&gt;这是第一段&lt;/p&gt; 
&lt;/p&gt; 
&lt;input type=&quot;button&quot; value=&quot;按钮&quot; onclick=&quot;add()&quot; /&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Nach dem Login kopieren

Ein Element in HTML löschen

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; 
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt; 
&lt;head&gt; 
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt; 
&lt;title&gt;测试文档&lt;/title&gt; 
&lt;script type=&quot;text/javascript&quot;&gt; 
function deleteE(){ 
var father = document.getElementById(&quot;demo&quot;); 
var child = document.getElementById(&quot;p1&quot;); 
father.removeChild(child); 
} 
&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;p id=&quot;demo&quot;&gt; 
&lt;p id=&quot;p1&quot;&gt;这是第一段&lt;/p&gt; 
&lt;p id=&quot;p2&quot;&gt;这是第二段&lt;/p&gt; 
&lt;/p&gt; 
&lt;input type=&quot;button&quot; value=&quot;删除&quot; onclick=&quot;deleteE()&quot; /&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Nach dem Login kopieren

Verwandte Empfehlungen:

JavaScript-Timing-Ereignisse verstehen und verwenden

JavaScript fügt dynamisch Li-Elemente hinzu

Zusammenfassung von Beispielen für Methoden zum dynamischen Erstellen von HTML-Tags mit Javascript

Das obige ist der detaillierte Inhalt vonJavaScript ändert HTML-Seitenelemente dynamisch, z. B. durch Hinzufügen oder Entfernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

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