JS中创建节点和插入节点

1、JS中添加段落的三种方式

第一种方式:通过createTextNode 来添加段落文本

function addP() {// 第一种方式var p = document.createElement("p");var txt = document.createTextNode("将来的你会感谢现在奋斗的自己");p.appendChild(txt);document.getElementById("container").appendChild(p);}

第二种方式:通过innerHTML来添加文本

function addP() {// 第二种方式var container = document.getElementById("container");var p = document.createElement("p");p.innerHTML = "未来的你会感谢现在拼命的自己";container.appendChild(p);}

第三种方式:

function addP() {// 第三种方式var container = document.getElementById("container");var str = "

未来的你会感谢现在拼命的自己

"
;container.innerHTML = str;}

JS添加图片的三种方式

第一种方式:用.style进行设置属性

function addImg() {var img = document.createElement("img");img.src = "img/Daniel_Wu.jpg";img.style.width = "300px";img.style.height = "200px";var container = document.getElementById("container");container.appendChild(img);}

第二种方式:(用setAttribute进行设置属性)

function addImg() {var img = document.createElement("img");img.setAttribute('src','img/Daniel_Wu.jpg');img.setAttribute('style','width: 300px ;height: 200px;');var container = document.getElementById("container");container.appendChild(img);}

第三种方式:(用innerHTML进行添加)

function addImg() {document.getElementById("container").innerHTML="";}

JS中添加文本框的三种方式

第一种:(通过createElement创建)

function addText() {var txt = document.createElement("input");txt.type = "text";txt.value = "新增文本框";var container = document.getElementsByTagName("div")[0];container.appendChild(txt);}

第二种:通过setAttribute进行设置属性

function addText() {var txt = document.createElement("input");txt.setAttribute("type","text");txt.setAttribute("value","这是新的文本框");var container = document.getElementsByClassName("container")[0];container.appendChild(txt);}

第三种:通过innerHTML进行创建

function addText() {document.getElementsByClassName("container")[0].innerHTML = "";}

JS添加option选项框的三种方法

1、通过.的方式进行设置属性

function addOptions() {var opt = document.createElement("option");opt.value = "3";opt.text = "来自天堂的魔鬼";var music = document.getElementsByName("music")[0];music.appendChild(opt);}

2、通过.options.add的方法进行添加

function addOptions() {var opt = document.createElement("option");opt.value = "4";opt.text = "泡沫啊啊啊";var music = document.getElementsByName("music")[0];music.options.add(opt);}

3、通过innerHTML的方法进行添加,注意是 options是 += 而不是 =

function addOptions() {document.getElementsByName("music")[0].innerHTML += "";}


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部