JavaScript，hbuilder中dom元素操作

img

img

没有页面Html代码嘛?

您好，这里边主要涉及的是javascript的dom操作，主要就是appendChild方法的应用，我做了一个简单的demo请复制运行查看效果，如果满意请您采纳~

<!DOCTYPE html>
<html lang="ZH-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="list">
    <li>123456789</li>
    <li>23456789</li>
    <li>3456789</li>
  </ul>
  <button onclick="move()">移动</button>
</body>
<script>
function move () {
  const list = document.getElementById('list')
  list.appendChild(list.getElementsByTagName('li')[0])
}
</script>
</html>

效果如下图

img

1.获取要移动的元素
document.getElementById()、
document.getElementByClassName()、
document.querySelector()、
document.querySelectorAll()
2.获取移动元素所在的父级元素
var moveElement = getElementById('moveElement');
var moveElementParent = moveElement.parentNode;
3.将要移动元素追加至父元素内容后
moveElementParent.appendChild( moveElement )
moveElementParent