Question

是否有可能以某种方式通过javascript / jquery在锚标记和图像标记之间添加元素（在这种情况下为<div></div>）？如果可以使用img标签的id，则更喜欢。

<a href=""><img id="123" src="..."></a>

到

<a href="#"><img id="123" src="..."><div>abc</div></a>

或

<a href="#"><div>abc</div><img id="123" src="..."></a>

Answer 1

使用append方法将子项添加到锚标记。另外在div标记内添加a是反模式，因为div是块级元素＆amp;锚标记只能包含内联元素

＆＃13;

var testDiv = '<div class ="testDiv"> Test Div</div>'

$('#testAnchorTag').append(testDiv)

＆＃13;

.testDiv {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" id="testAnchorTag"><img src="..."></a>

＆＃13;

要在div之前添加img，您可以使用原生js insertBefore方法

＆＃13;

var getChild = document.getElementById("childImg");
var getParent = getChild.parentNode;


var newDivChild = document.createElement('div');
newDivChild.innerHTML = "Test Div";
newDivChild.classList.add("testDiv");

getParent.insertBefore(newDivChild, getChild)

＆＃13;

.testDiv {
  color: green;
}

＆＃13;

<a href="" id="testAnchorTag"><img id="childImg" src="..."></a>

＆＃13;

Answer 2

将其附加到图像的父级

var div = '<div>Some Copy</div>'

$('#123').parent().append(div);

Answer 3

您可以使用before()和after() jQuery方法追加和添加任何元素。这是示例代码。

// to get <a href="#"><img id="123" src="..."><div>abc</div></a>
$("#123").after("<div>abc</div>");
$( "<div>abc</div>" ).insertAfter("#123");

// to get <a href="#"><div>abc</div><img id="123" src="..."></a>

$("#123").before("<div>abc</div>");
$( "<div>abc</div>" ).insertBefore( "#123" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href=""><img id="123" src="..."></a>

Answer 4

Jquery可以帮助解决这个问题。一旦将选择器合并到项目中，只需确保更改选择器。

＆＃13;

$('a').html('<div>abc</div>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<a href="#"><img id="123" src="..."></a>

＆＃13;

Answer 5

还有一点Vanilla JavaScript。

好的，在你的HTML中，img位于a元素内部，即当你说你想要a和img元素之间的另一个元素时，你实际上是什么意味着在a元素中包含该元素。

最常见的方法是使用jQuery的.append .prepend方法，但默认情况下提供的一些DOM API方法能够做到这一点，并且在浏览器中广泛支持，所以为什么不去香草选项。

如果您引用a，那么您必须在其中附加/添加新HTML以在img元素内部包含新的HTML，尽管有更好的选择，但是使用{ {1}} - 顾名思义它可以插入相邻的HTML，句点。

由于您已经为Element.insertAdjacentHTML元素提供了一个不正确的ID，因此您不应该使用数字启动id，始终使用英文字母或下划线，所以让我们说你有：

img

你所要做的就是

<a href=""><img id="_123" src="..."></a>

在var myImg = document.getElementById('_123'); myImg.insertAdjacentHTML('afterend', '<div>abc</div>');中，第一个参数告诉在哪里插入HTML，insertAdjacentHTML表示在元素之后，afterend在之前，类似。还有另外两个选项beforeend和afterbegin不适用于自我关闭元素，例如beforebegin，它们类似于img和prepend in性质。

有关append的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

在anchor和img标记之间插入元素

5 个答案: