How to wrap a element to new element one created

Question

I am trying to wrap a DOM element to new element one I create. But not works.

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

Possible duplicate of [Wrapping a set of DOM elements using JavaScript](https://stackoverflow.com/questions/3337587/wrapping-a-set-of-dom-elements-using-javascript) — str, Jul 04 '18 at 12:48
Bear in mind that it is not valid to have an `` inside of an ``. — Niet the Dark Absol, Jul 04 '18 at 12:50
There is no existing dom in the html in the above suggestion. I like to `wrap` the exisint element to dynamic one — 3gwebtrain, Jul 04 '18 at 12:52
Just before `link.appendChild..` use `button.parentNode.insertBefore(link,button)` to put the new element in the place of the old element. — Niet the Dark Absol, Jul 04 '18 at 12:56
@NiettheDarkAbsol - I don't want to append in Before. If there might be other children will be exist. I just want to replace with same `DOM` Level where the original placed before — 3gwebtrain, Jul 04 '18 at 12:57
That's exactly what `button.parentNode.insertBefore(link,button)` does. It inserts the new element immediately before the button. That is to say, in the exact same place once the button has been moved into the new element. — Niet the Dark Absol, Jul 04 '18 at 13:00
@NiettheDarkAbsol - can you have a look here : http://jsfiddle.net/3gwebtrain/t8Lf64p0/45/ - recreate a fiddle for me — 3gwebtrain, Jul 04 '18 at 13:01

Saeed · Answer 1 · 2018-07-04T12:59:44.127

1

First of all, you have to append the "link" element to a part of the document. After that clicking on that link appends the button to "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>

edited Jul 04 '18 at 12:59

answered Jul 04 '18 at 12:58

Saeed

2,169
2
13
29

add the js part of the code in a script tag like my code: – Saeed Jul 04 '18 at 13:03
upvoted just because you are new, using SO with very low rep is very frustrating. The code you gave creates invalid html ( inside tag), but that's what OP wanted, not your fault. – Braca Jul 04 '18 at 13:24

Hikmat G. · Accepted Answer · 2018-07-04T13:14:38.743

You don't append link itself to body.

Edit: Changed code to replace element instead of append, it wasn't what you wanted. And it doesn't work with link because it can't wrap input. check here

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

How to wrap a element to new element one created

2 Answers2