赞
踩
说明:在选定元素(父元素)内部的最后末尾追加创建新元素,DOM结构存在新元素节点,可正常渲染显示,但网页源码中无新元素代码;删除时,先获取父元素,使用父元素的remove方法;元素从DOM中删除,删除后,无法再获取。
- //父元素
- var jsDiv = document.getElementById("jsc");
-
- var p = document.createElement("p");
- p.id = "newp1";
- p.style.color = "red";
- p.innerText = "html字符串直接生成";
- jsDiv.appendChild(p);
说明:会覆盖整个页面上的内容,DOM结构存在新元素节点,可正常渲染显示,网页源码中无新内容的代码;
删除时,使用document.body.remove方法;元素从DOM中删除,删除后,无法再获取。
document.write("<h1 id='newp1'>document.write创建的元素</h1><button onclick='jsDel()'>js删除</button>");
说明:会覆盖选定元素内部的所有内容,DOM结构存在新元素节点,可正常渲染显示,但网页源码中无新元素代码;
删除时,先获取父元素,使用父元素的remove方法;元素从DOM中删除,删除后,无法再获取。
- //父元素
- var jsDiv = document.getElementById("jsc");
-
- jsDiv.innerHTML = "<h2 id='newp1'>innerHTML方式</h2>";
- function jsDel() {
-
- var p = document.getElementById("newp1");
- console.log(p);
- jsDiv.removeChild(p);
-
- var p1 = document.getElementById("newp1");
- console.log(p1);
- }
说明:在选定元素内部的最后末尾追加创建新元素,DOM结构存在新元素节点,可正常渲染显示,但网页源码中无新元素代码;
删除时,先获取父元素,使用父元素的remove或empty方法;元素从DOM中删除,删除后,无法再获取;
- //父元素
- var jqDiv = $("#jqc");
-
- //var p = $("<p id='newp2'>jquery html字符串直接生成</p>");
- //p.appendTo($("#jqc"));
- //p.appendTo(jqDiv); //子元素插入到父元素中
- jqDiv.append(p); //向父元素中插入子元素
-
- // jqDiv.append("<p id='newp2'>jquery html字符串直接生成</p>");
- //$("<p id='newp2'>jquery html字符串直接生成</p>").appendTo(jqDiv);
-
说明:会覆盖选定元素内部的所有内容,DOM结构存在新元素节点,可正常渲染显示,但网页源码中无新元素代码
删除时,先获取父元素,使用父元素的remove或empty方法;元素从DOM中删除,删除后,无法再获取;
- var p = "<p id='newp2'>jquery html字符串直接生成</p>";
- jqDiv.html(p);
- remove:
- $(目标).remove(); //删除目标元素及内部的所有元素
-
- empty:
- $(目标).empty(); //删除目标元素内部的所有元素
参考:https://blog.csdn.net/qq_27626333/article/details/51927022
1) prepend() 方法在被选元素的开头(仍位于内部)插入指定内容
提示:prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prependTo() 无法使用函数来插入内容。
语法:$(selector).prepend(content)
content必需。规定要插入的内容(可包含 HTML 标签)。
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("p").prepend("<b>Hello world!</b> ");
- });
- });
- </script>
- </head>
- <body>
- <p>This is a paragraph.</p>
- <p>This is another paragraph.</p>
- <button>在每个 p 元素的开头插入内容</button>
- </body>
- </html>
2) prependTo() 方法在被选元素的开头(仍位于内部)插入指定内容
提示:prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prepend() 能够使用函数来插入内容。
语法:$(content).prependTo(selector)
content 必需。规定要插入的内容(可包含 HTML 标签)。
selector 必需。规定在何处插入内容。
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".btn1").click(function(){
- $("<b>Hello World!</b>").prependTo("p");
- });
- });
- </script>
- </head>
- <body>
- <p>This is a paragraph.</p>
- <p>This is another paragraph.</p>
- <button class="btn1">在每个 p 元素的开头插入文本</button>
- </body>
- </html>
3) after() 方法在被选元素后插入指定的内容
语法:$(selector).after(content)
content必需。规定要插入的内容(可包含 HTML 标签)。
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("p").after("<p>Hello world!</p>");
- });
- });
- </script>
- </head>
- <body>
- <p>This is a paragraph.</p>
- <button>在每个 p 元素后插入内容</button>
- </body>
- </html>
4) before() 方法在被选元素前插入指定的内容
语法:$(selector).before(content)
content 必需。规定要插入的内容(可包含 HTML 标签)。
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".btn1").click(function(){
- $("p").before("<p>Hello world!</p>");
- });
- });
- </script>
- </head>
- <body>
- <p>This is a paragraph.</p>
- <button class="btn1">在每个段落前面插入新的段落</button>
- </body>
- </html>
5)insertAfter()把匹配的元素插入到另一个指定的元素集合的后面
注释:如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之后。
语法:$(content).insertAfter(selector)
content必需。规定要插入的内容。可能的值:选择器表达式、HTML 标记
selector必需。规定在何处插入被选元素。
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("<span>你好!</span>").insertAfter("p");
- });
- });
- </script>
- </head>
- <body>
- <p>这是一个段落。</p>
- <p>这是另一个段落。</p>
- <button>在每个 p 元素之后插入 span 元素</button>
- </body>
- </html>
6) insertBefore()把匹配的元素插入到另一个指定的元素集合的前面
注释:如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之前。
语法:$(content).insertBefore(selector)
content 必需。规定要插入的内容。可能的值:选择器表达式、HTML 标记
selector 必需。规定在何处插入被选元素。
- <html>
- <head>
- <script type="text/javascript" src="/jquery/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("button").click(function(){
- $("<span>你好!</span>").insertBefore("p");
- });
- });
- </script>
- </head>
- <body>
- <p>这是一个段落。</p>
- <p>这是另一个段落。</p>
- <button>在每个 p 元素之前插入 span 元素</button>
- </body>
- </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。