Question 66427 in Javascript Question posted in
A very good W3school tutorial can be found here.

how append a element after an element – Javascript

i want replace a button in a website
how select a element before a element?

better solution then

$('.col')[2]

<div class="row">
    <div class="col">
        <button id="itemCaptureResultLeftButton" class="bt">&lt;</button>
    </div>
    <div class="col">
        <div class="row">
        
        </div>
        <div class="row">
           
        </div>
    </div>
    <div class="col">
        <button id="itemCaptureResultRightButton" class="btn">&gt;</button>
    </div>
</div>

my code

var itemCaptureResultRightButtonSW = document.createElement("button");
itemCaptureResultRightButtonSW.setAttribute('id', 'itemCaptureResultRightButtonSW');
itemCaptureResultRightButtonSW.innerHTML = '&gt;';
itemCaptureResultRightButtonSW.className += "btn";
document.getElementById('itemCaptureResultRightButton').append(itemCaptureResultRightButtonSW);
//$('#itemCaptureResultRightButton').remove();

i expected

<button id="itemCaptureResultRightButton" class="btn">&gt;</button>
<button id="itemCaptureResultRightButtonSW" class="btn">&gt;</button>

i got

<button id="itemCaptureResultRightButton" class="btn">&gt;
<button id="itemCaptureResultRightButtonSW" class="btn">&gt;</button></button>
Tags:

2

Answers


  1. 0

    The problem is that you want to append as a sibling of the previous button but you are appending it as a child, therefore you have this behaviour.

    You can use insertBefore:

    let refNode = document.getElementById('itemCaptureResultRightButton');
let parentNode = getElementsByClassName("col")[2];
parentNode.insertBefore(itemCaptureResultRightButtonSW,refNode);

    You can also use parentNode to get access to the parent node and then append as a child:

    let parentNode = document.getElementById('itemCaptureResultRightButton').parentNode;
parentNode.append(itemCaptureResultRightButtonSW);

    And then you could remove the previous one as I understand you want.

    Login or Signup to reply.
  2. 0

    Instead of using append() the way you did it, which will add the new button as a child of the existing button, you should use replaceWith() to replace the existing button with the new button directly:

    var itemCaptureResultRightButtonSW = document.createElement("button");
itemCaptureResultRightButtonSW.setAttribute('id', 'itemCaptureResultRightButtonSW');
itemCaptureResultRightButtonSW.innerHTML = '&gt;';
itemCaptureResultRightButtonSW.className += "btn";
document.getElementById('itemCaptureResultRightButton').replaceWith(itemCaptureResultRightButtonSW);

    I noticed you want to replace the original button with a new button that only has a different id.
    A simpler way to achieve the change you wanted is to use directly change the id attribute of the original button by using setAttribute() :

    document.getElementById('itemCaptureResultRightButton').setAttribute('id', 'itemCaptureResultRightButtonSW');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search