Question

我有一些复选框，一旦我检查其中一个复选框的ID被发送到一个函数。我希望此函数将复选框更改为具有相同ID的<img>元素。

我试过了

document.getElementById(ID).innerHTML = '<img src="image.png" id="' + ID + '"/>';

但这不起作用，是否可以更改元素，还是需要使用相同的ID创建新元素？

由于

Answer 1

我建议不要将一个元素替换为另一个元素，而是使一个元素可见，一个不可见，例如......

document.getElementById(ID).style.display='none';

和

document.getElementById(ID).style.display='block';

我会想到绕过相同ID约束的方法。为什么你需要它们具有完全相同的ID？

Answer 2

在纯JavaScript中你可以做类似的事情：

function changeToImage(el) {
    var img = document.createElement('img');
    img.setAttribute('src', 'http://www.google.com/images/nav_logo29.png');
    img.setAttribute('ID', el.getAttribute('id'));
    var parent = el.parentNode;
    parent.appendChild(img);
    parent.removeChild(el);
}

然后从你的html中你会做

<input type="checkbox" onclick="changeToImage(this)" />

请注意，这可能不是跨浏览器的证明....您也可以使用jquery来简化事情

Answer 3

您需要创建一个新元素并删除旧元素。如果您需要它，这里有一篇关于使用javascript添加和删除元素的快速文章：http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

通过解释为什么你不能做你想要做的事情，你的元素在DOM中被表示为不同的“类型”（严格来说，这不是真的，但它是一个有用的表示），而你不能只是通过改变它的底层标记来改变对象的“类型”。

Answer 4

你可以尝试这样写。它对我有用。用HTML替换innerHTML

document.getElementById(ID).HTML = '<img src="image.png" id="' + ID + '"/>';

动态更改html元素

4 个答案: