如何使用 JavaScript 向 html 文档中添加图片? 下面本篇文章就来给大家介绍一下使用 JavaScript 向 HTML 文档中添加图片的方法, 希望对大家有所帮助.
想要使用 JavaScript 添加图片, 可以先使用 createElement() 方法创建一个 img 元素, 并向 img 元素的 src 属性赋图片的 URL 地址值; 然后使用 appendChild() 方法将 img 元素添加到指定 dom 对象中, 即可.
createElement() 方法
createElement() 方法通过指定名称创建一个元素
语法:
document.createElement(nodename)
参数: nodename: 必须. 创建元素的名称.
返回值: 创建的元素节点
getElementById() 方法
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用.
HTML DOM 定义了多种查找元素的方法, 除了 getElementById() 之外, 还有 getElementsByName() 和 getElementsByTagName().
如果没有指定 ID 的元素返回 null
如果存在多个指定 ID 的元素则返回 undefined.
语法:
document.getElementById(elementID)
appendChild() 方法
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点.
提示: 如果文档树中已经存在了 newchild, 它将从文档树中删除, 然后重新插入它的新位置. 如果 newchild 是 DocumentFragment 节点, 则不会直接插入它, 而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾.
你可以使用 appendChild() 方法移除元素到另外一个元素.
语法:
node.appendChild(node)
参数: node: 必须. 你要添加的节点对象.
示例: JavaScript 向 div 元素中添加图片
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <script type="text/javascript">
- Windows.onload = function() {
- var bigImg = document.createElement("img"); // 创建一个 img 元素
- bigImg.src = "https://www.html.cn/static/images/logo.png"; // 给 img 元素的 src 属性赋值
- //bigImg.width="320"; //320 个像素 不用加 px
- var myp = document.getElementById('myp'); // 获得 dom 对象
- myp.appendChild(bigImg); // 为 dom 添加子元素 img
- };
- </script>
- </head>
- <body>
- <div id="myp" style="border:1px solid #eee;width:320px;height:100px;">
- </div>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/javascript/12001.html