Question

我正在尝试将DOM元素包装到我创建的新元素中。但不起作用。

function moveToLink(){
        var button = document.getElementById('button');
        var link = document.createElement('a');
        link.setAttribute('href', '#');
        
        link.appendChild( button); // need wrap
     
      }
      
      moveToLink();

a{
  border:2px solid gray;
  display:block;
}

<input type="button" id="button" value="try me" onclick="moveToLink()">

Live Demo

Answer 1

首先，您必须将“ link”元素附加到文档的一部分。之后，单击该链接会将按钮添加到“链接”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script> 
      function moveToLink(){
        var button = document.getElementById('button');
        var link = document.createElement('a');
        link.setAttribute('href', '#');
        document.body.appendChild(link);
        link.appendChild( button);
      }
    </script>
</head>
<body>
    <input type="button" id="button" value="try me" onclick="moveToLink()" />
</body>
</html>

Answer 2

您不会将链接本身附加到正文。

编辑：更改了代码以替换元素而不是添加，这不是您想要的。而且它不适用于链接，因为它不能包装输入。检查here

function moveToLink(){
    var button = document.getElementById('button');
    var div = document.createElement('div');
    document.getElementsByClassName('parent')[0].replaceChild(div, button);
    div.appendChild( button);
}

如何将元素包装到创建的新元素

2 个答案: