DOM编程艺术

最新推荐文章于 2024-10-18 17:51:23 发布

HarryChoy

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量239

点赞数

分类专栏： codeNote 文章标签： DOM javascript

本文链接：https://blog.csdn.net/qq_31390937/article/details/54628903

版权

codeNote 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript dom编程艺术</title>
</head>
<style type="text/css">
div {
width: 100px;
height: 100px;
color: white;
border-radius: 10px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>

<body>
<div id="myfirstdiv">
<p id="myp">我是第一行</p>点我点我</div>
<img src="http://c.hiphotos.baidu.com/image/h%3D200/sign=ec4eb669d309b3def4bfe368fcbf6cd3/d1160924ab18972b6e0711cbe4cd7b899e510af5.jpg" width="300px">
<script type="text/javascript">
var element = document.getElementById('myfirstdiv');
console.log(element);
element.innerHTML = "干掉你";
var _img = document.getElementsByTagName("img")[0];
console.log(_img);
_img.src = "http://f.hiphotos.baidu.com/image/h%3D360/sign=e105b9f1d61b0ef473e89e58edc651a1/b151f8198618367a9f738e022a738bd4b21ce573.jpg";
_img.setAttribute("src", "http://g.hiphotos.baidu.com/image/h%3D360/sign=17f52f23612762d09f3ea2b990ec0849/5243fbf2b21193130e676fb067380cd791238d8e.jpg");
element.style.color = "red";
var para = document.createElement("h1");
para.innerHTML = "我是追加的h1"；
element.appendChild(para);
element.insertBefore(para, document.getElementById('myp'));
element.removeChild(document.getElementById('myp'));
var replaceBtn = document.createElement("a");
replaceBtn.innerTEXT = "百度一下";
element.replaceChild(replaceBtn, document.getElementById('myp'));
</script>
</body>

</html>