javascript 如何在元素之后追加元素

qvk1mo1f 于 2023-04-28 发布在 Java

关注(0)|答案(2)|浏览(103)

我想替换一个按钮在一个网站如何选择一个元素之前的一个元素？
更好的解决方案

$('.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>

我的代码

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

我期待

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

我得到了

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

JavaScript

来源：https://stackoverflow.com/questions/76110074/how-append-a-element-after-an-element

2条答案

按热度按时间

9q78igpj1#

问题是，你想作为上一个按钮的兄弟追加，但你将其作为子追加，因此你会有这种行为。
可以使用insertBefore：

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

您也可以使用parentNode来访问父节点，然后作为子节点追加：

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

然后你可以按我理解的方式去掉前一个。

赞(0）回复(0）举报 2023-04-28

wljmcqd82#

与使用append()的方式不同，它会将新按钮添加为现有按钮的子按钮，而应该使用replaceWith()直接用新按钮替换现有按钮：

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

我注意到你想用一个只有不同的id的新按钮替换原来的按钮。一个更简单的方法来实现你想要的改变是直接使用setAttribute()来改变原始按钮的id属性：

document.getElementById('itemCaptureResultRightButton').setAttribute('id', 'itemCaptureResultRightButtonSW');

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 如何在元素之后追加元素

2条答案

相关问题

热门标签

最新问答