有没有精通HTML的大神帮帮我。问题是：使用JavaScript *** 作页面内容（DOM），包括添加、修改、删除？_IT百科

使用JavaScript *** 作页面内容（DOM）可以通过以下方法实现：

1、添加: 可以使用JavaScript中的document.createElement()方法来创建新的元素，然后使用appendChild()或者insertBefore()方法将其添加到页面中。

// 创建新的段落元素

var newP = document.createElement("p")

// 为段落赋值

newP.innerHTML = "这是新添加的段落"

// 找到需要添加新元素的父元素

var parent = document.getElementById("myDiv")

// 将新元素添加到父元素中

parent.appendChild(newP)

2、修改: 可以使用JavaScript中的getElementById()或者getElementsByTagName()方法来获取页面中的元素，然后使用innerHTML或者innerText属性来修改其中的内容。

// 通过id获取需要修改的元素

var myP = document.getElementById("myP")

// 修改元素的内容

myP.innerHTML = "这是修改后的段落"

3、删除: 可以使用JavaScript中的removeChild()或者remove()方法来删除页面中的元素

// 通过id获取需要删除的元素

var myP = document.getElementById("myP")

// 找到父元素

var parent = myP.parentNode

// 从父元素中删除该元素

parent.removeChild(myP)

这是一种简单的方法，在实际应用中，使用JavaScript对页面进行 *** 作还需要考虑到很多的因素，如浏览器兼容性、性能优化等。最好使用一些框架或库来帮助我们简化这些 *** 作，例如jQuery、React、Vue等。总之，通过熟练掌握JavaScript和相关框架或库的使用，可以有效地 *** 作页面内容并实现丰富的交互效果。

楼主的代码写的要注意兼容和规范性。

核心代码:

function removeTable(){

var objDiv = document.getElementById("divid")

var vtables = objDiv.childNodes//

if (vtables.length >0)

objDiv.removeChild(vtables[vtables.length - 1])

}

</script>

===============================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

function createTable(){

var objDiv = document.getElementById("divid")

var vtable=document.createElement("table")

// vtable.id="idTB"

vtable.cellPadding="0",

vtable.cellSpacing="0"

vtable.border="1"

vtable.color="#000000"

vtable.borderColorDark="#000000"

vtable.borderColorLight="#FFFFFF"

for(i=0i<1i++){

var vtr=vtable.insertRow(i)//insertRow插入行

for(k=0k<5k++){

vtd=vtr.insertCell(k)//insertCell插入列

vtd.innerHTML="<input type=text style='border:0px solid'>"// InnerHtml 是用来获取或设置位于指定的服务器控件的开始标记和结束标记之间的内容。

}

objDiv.appendChild(vtable)//appendChild方法可向节点的子节点列表的末尾添加新的子节点。此方法可返回这个新的子节点。

}

function mouseDown(){

if(event.button==2) {

if(event.srcElement.tagName="INPUT"){ //srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。

//tagName 属性返回被选元素的标签名。

window.confirm(event.srcElement.value)

}

document.onmousedown=mouseDown//onmousedown 事件会在鼠标按键被按下时发生

document.captureEvents(Event.MOUSEDOWN)

/* function RemoveRow()

{

oTR=idTB.rows(idTB.rows.length-1)

oTR.removeNode(true)

} */

function removeTable(){

var objDiv = document.getElementById("divid")

var vtables = objDiv.childNodes//

if (vtables.length >0)

objDiv.removeChild(vtables[vtables.length - 1])

}

</script>

</head>

<body>

</body>

</html>

几点意见：

1.象1楼说的，<div id="divid"></div>应该放在body里。

2.<script标签的属性不对。

3.直接引用id当作对象本身只在IE下有效，应该用document.getElementById("")来获取对象。

其他你看我给你的页面吧，已经在DW里优化过了。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11720341.html

有没有精通HTML的大神帮帮我。问题是：使用JavaScript *** 作页面内容（DOM），包括添加、修改、删除？

发表评论

评论列表（0条）