Remove wrapper div from document.createElement

Question

I've been stuck on this for the longest time and it's driving me nuts. I've tried a dozen different methods and can't figure out how to get it to work. Any help would be appreciated!! Thanks

Here's my code:

<script>
  function runScript() {
    //get parent of script element
    var element = document.currentScript.parentElement;
    //my html string that needs to be inserted inside the original div
    var item = "<div>test1</div><div>test2</div>";

    //My current method. this method works but creates another wrapper div. I need a way to remove the wrapper div or a different method altogether without any wrapper divs.
    var z = document.createElement('div');
    z.innerHTML = item;
    element.appendChild(z);
  }
</script>


<div id="main-wrapper">
  <script>
    runScript();
  </script>
</div>

I think you could use `addAdjacentHTML()` or `createDocumentFragment()`. — Barmar, Mar 01 '19 at 23:28
element.innerHTML = item; <- note that this removes the script after — Joey, Mar 01 '19 at 23:29
@Joey That will remove the existing contents of `element`, he wants to add to it. — Barmar, Mar 01 '19 at 23:29
@Ele `
Test1
` is the first child, `
Test2
` is the second child. — Barmar, Mar 01 '19 at 23:30
Any reason why you have a jquery tag but you're not using jquery anywhere in your code? Are you trying to keep it vanilla and only using jquery as a last resort? — Doug F, Mar 01 '19 at 23:31
Just wondering why would you keep the Script tag after it ran @Ele — Joey, Mar 01 '19 at 23:32
@DougF I tagged jquery as a last resort. Looks like there was a simple javascript solution after all. Thanks — Riley Bell, Mar 01 '19 at 23:51
@RandyCasburn Exactly what I needed. I knew there was something I wasn't thinking of. Thanks! — Riley Bell, Mar 01 '19 at 23:51

score 1 · Accepted Answer · answered Mar 01 '19 at 23:32

1

<script>
  function runScript() {
    //get parent of script element
    var element = document.currentScript.parentElement;
    //my html string that needs to be inserted inside the original div
    var item = "<div>test1</div><div>test2</div>";
    element.innerHTML = item;
  }
</script>


<div id="main-wrapper">
  <script>
    runScript();
  </script>
</div>

answered Mar 01 '19 at 23:32

sathish kumar

1,477
1
11
18

This is exactly what I needed. It's funny I was stuck on this for the longest time just needed a fresh look at it. Ended up going with element.innerHTML += item. Works fine for what I need it for. Thanks! – Riley Bell Mar 01 '19 at 23:45

score 1 · Answer 2 · answered Mar 01 '19 at 23:38

1

As you've tagged with jQuery, you can create the element as follow:

$(item);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  function runScript() {
    var item = "<div>test1</div><div>test2</div>";
    $(document.currentScript.parentElement).append($(item));
  }
</script>


<div id="main-wrapper">
  <script>
    runScript();
  </script>
</div>

answered Mar 01 '19 at 23:38

Ele

33,468
7
37
75

This is a great solution as well. Ended up going with the other answer since pure javascript would be my preferred method (for performance). By the way I tried some different variations of this earlier and couldn't get it to work. I knew there was a simple way to do it with jquery. Thanks! – Riley Bell Mar 01 '19 at 23:49
@RileyBell no problem my friend!! – Ele Mar 01 '19 at 23:56

score 1 · Answer 3 · answered Mar 01 '19 at 23:43

You can use the insertAdjacentHTML method.

<script>
  function runScript() {
    //get parent of script element
    var element = document.currentScript.parentElement;
    //my html string that needs to be inserted inside the original div
    var item = "<div>test1</div><div>test2</div>";
    element.insertAdjacentHTML('beforeend', item);
  }
</script>


<div id="main-wrapper">
  <script>
    runScript();
  </script>
</div>

Or use a template instead of a DIV.

<script>
  function runScript() {
    //get parent of script element
    var element = document.currentScript.parentElement;
    //my html string that needs to be inserted inside the original div
    var item = "<div>test1</div><div>test2</div>";

    var z = document.createElement('template');
    z.innerHTML = item;
    element.appendChild(z.content);
  }
</script>


<div id="main-wrapper">
  <script>
    runScript();
  </script>
</div>

Remove wrapper div from document.createElement

3 Answers3