js添加text到html append,js原生方式实现jquery中的append()方法

一．在使用jquery时，

append() 方法在被选元素的结尾(仍然在内部)插入指定内容

使用方法：$(selector).append(content)，content为必需的。规定要插入的内容(可包含HTML标签)

二．在使用原生js时，使用appendChild()方法可向节点的子节点列表的末尾添加新的子节点，

用法：parent.appendChild(child);child没有引号包住，child参数，是node类型。给一个空文档里面动态创建元素，要使用document.body.appendChild(child).

三.例子

.test{

color: red;

border:1px solid red;

display: inline-block;

font-size: 20px;

width: 200px;

height:50px;

}

appendChild方法是在父级节点中的子节点的末尾添加新的节点

jquery中append方法在被选元素的结尾(仍然在内部)插入指定内容

//用jquery来实现

$(function(){

$("#p2").bind("click",function(){

$(this).append("---我是用jquery实现的");

})

})

//用原生js来实现

/*window.οnlοad=function(){

var pobj=document.getElementById('p1');

pobj.οnclick=function(){

var strongobj=document.createElement('strong');

var textobj=document.createTextNode("----我是使用原生Js实现的");

pobj.appendChild(strongobj.appendChild(textobj));

}

}*/

效果图：点击第二个p文本段，在后面追加一个....

当把代码中的js原生代码实现的效果图：点击第一个p文本段，在后面追加一个，再添加一个文本段，然后追加到p文本段后面

四.缺点：

在使用js代码实现时，样式方面实现有些小问题，在以后的学习中，继续补充，完善。