JavaScript文档内容修改

末蓝、 2024-04-17 19:58 77阅读 0赞

### 插入子元素 ###

<h1>这是标题1</h1>
    		<h1>这是标题2</h1>
    		<h1 class="biaoti3">这是标题3</h1>
    		<h1>这是标题4</h1>
    		<h1>这是标题5</h1>
    		
    		<script type="text/javascript">
    			var h1 = document.createElement('h1')
    			h1.innerHTML = "这是要插入的内容";
    			
    			var body = document.querySelector('body')
    			var bt3 = document.querySelector('.biaoti3')
    			//在什么元素前面插入内容，语法：父元素对象.insertBefore(要插入的元素对象，参考位置的元素对象)
    			//body.insertBefore(h1,bt3)
    			bt3.parentElement.insertBefore(h1,bt3)
    			
    		</script>

创建文档对象

删除元素对象

<body>
    		<h1>这是标题1</h1>
    		<h1>这是标题2</h1>
    		<h1 class="biaoti3">这是标题3</h1>
    		<h1>这是标题4</h1>
    		<h1>这是标题5</h1>
    		
    		<script type="text/javascript">
    			var body = document.querySelector('body');
    			var bt3 = document.querySelector('.biaoti3')
    			//删除文档对象，语法：父元素对象.removeChild(子元素对象)
    			//body.removeChild(bt3)
    			bt3.parentElement.removeChild(bt3)
    		</script>

替换元素对象

<h1>这是标题1</h1>
    		<h1>这是标题2</h1>
    		<h1 class="biaoti3">这是标题3</h1>
    		<h1>这是标题4</h1>
    		<h1>这是标题5</h1>
    		
    		<script type="text/javascript">
    			var img = document.createElement('img')
    			img.src = "img/cxk.jpg";
    			
    			var body = document.querySelector('body')
    			var bt3 = document.querySelector('.biaoti3')
    			//替换子元素，语法：父元素对象.replaceChild(新的元素对象，老的元素对象)
    			//body.replaceChild(img,bt3);
    			bt3.parentElement.replaceChild(img,bt3)
    		</script>

修改元素内容

<body>
    		<div id="d1">helloworld</div>
    		<script type="text/javascript">
    			var d1 = document.querySelector('#d1')
    			//文档对象的innerHTML就是具体元素里面的内容。
    			//获取元素的内容
    			console.log(d1.innerHTML)
    			d1.innerHTML = '<h1>今天午饭吃啥？</h1><img src="img/cxk.jpg">'
    			console.log(d1.innerHTML)
    		</script>
    	</body>