Question

我的列表中包含img个标签，其中包含一些文字。

我正在尝试在结束<br>标记之前在img标记的末尾和文本节点之间插入<li>标记。

所以每个li项应该如下：

<li><img><br>Text</li>

我希望代码严格来说是JavaScript - 没有库。

我的JavaScript开头是这样的：

var images = [];
// get all the images on the page
images = document.getElementsByTagName("img");
// create br element
var br = document.createElement("br");

for (var i = 0; i < images.length; i++) {
    // loop through all the image tags and 
    // append br element as first sibling as img
}

我在for循环

中尝试了以下内容

images[i].parentNode.insertBefore(br, images[i].nextSibling);
images[i].appendChild(br);

以下是HTML的摘录：

<div>
    <ul>
        <li role="button"><img src="icons/home.png" alt="Home icon" height="24" width="24"/>Home</li>
        <li role="button"><img src="icons/pan-map.png" alt="Pan Map icon" height="24" width="24"/>Pan Map</li>
        <li role="button"><img src="icons/initial-map-view.png" alt="Initial Map View icon" height="24" width="24"/>Initial View</li>
        <li role="button"><img src="icons/zoom-in.png" alt="Zoom In icon" height="24" width="24"/>Zoom In</li>
        <li role="button"><img src="icons/zoom-out.png" alt="Zoom Out icon" height="24" width="24"/>Zoom Out</li>
    </ul>
</div>

编辑：以上脚本适用于不支持display: inline-block的IE7，因此在这种情况下，不能依赖CSS来获得解决方案

Answer 1

您必须为每张图片创建一个新的br：

var br = document.createElement("br");
images[i].parentNode.insertBefore(br, images[i].nextSibling);

var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
  var br = document.createElement("br");
  images[i].parentNode.insertBefore(br, images[i].nextSibling);
}

<div>
  <ul>
    <li role="button"><img src="/favicon.ico" />Home</li>
    <li role="button"><img src="/favicon.ico" />Pan Map</li>
    <li role="button"><img src="/favicon.ico" />Initial View</li>
    <li role="button"><img src="/favicon.ico" />Zoom In</li>
    <li role="button"><img src="/favicon.ico" />Zoom Out</li>
  </ul>
</div>

或者你可以克隆它：

images[i].parentNode.insertBefore(br.cloneNode(false), images[i].nextSibling);

var images = document.getElementsByTagName("img");
var br = document.createElement("br");
for (var i = 0; i < images.length; i++) {
  images[i].parentNode.insertBefore(br.cloneNode(false), images[i].nextSibling);
}

<div>
  <ul>
    <li role="button"><img src="/favicon.ico" />Home</li>
    <li role="button"><img src="/favicon.ico" />Pan Map</li>
    <li role="button"><img src="/favicon.ico" />Initial View</li>
    <li role="button"><img src="/favicon.ico" />Zoom In</li>
    <li role="button"><img src="/favicon.ico" />Zoom Out</li>
  </ul>
</div>

也就是说，您可以通过将图像显示为块来产生换行符：

img { display: block; }

img {
  display: block;
}

<div>
  <ul>
    <li role="button"><img src="/favicon.ico" />Home</li>
    <li role="button"><img src="/favicon.ico" />Pan Map</li>
    <li role="button"><img src="/favicon.ico" />Initial View</li>
    <li role="button"><img src="/favicon.ico" />Zoom In</li>
    <li role="button"><img src="/favicon.ico" />Zoom Out</li>
  </ul>
</div>

Answer 2

使用https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

＆＃13;

import {Injectable, ViewMetadata, ComponentMetadata,} from '@angular/core';
import {ReflectorReader, reflector} from '../core_private';
import {Type, stringify, isBlank, isPresent} from '../src/facade/lang';
import {BaseException} from '../src/facade/exceptions';
import {Map} from '../src/facade/collection';

@Injectable()
export class ViewResolver {
    constructor(private _reflector: ReflectorReader = reflector) {}

    resolve(component: Type): ViewMetadata {
        ... stuff here ...
    }
}

＆＃13;

images = document.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {
  images[i].insertAdjacentHTML('afterend', '<br/>')
}

＆＃13;

Answer 3

如How to do insert After() in JavaScript without using a library?所示，您可以按如下方式定义insertAfter函数：

＆＃13;

var images = [];
images = document.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {
	var br = document.createElement("br");
	insertAfter(br, images[i])
}

function insertAfter(newNode, referenceNode) {
	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

＆＃13;

<div>
	<ul>
		<li role="button"><img src="http://placehold.it/300x200" alt="Home icon" height="24" width="24" />Home</li>
		<li role="button"><img src="http://placehold.it/300x200" alt="Pan Map icon" height="24" width="24" />Pan Map</li>
		<li role="button"><img src="http://placehold.it/300x200" alt="Initial Map View icon" height="24" width="24" />Initial View</li>
		<li role="button"><img src="http://placehold.it/300x200" alt="Zoom In icon" height="24" width="24" />Zoom In</li>
		<li role="button"><img src="http://placehold.it/300x200" alt="Zoom Out icon" height="24" width="24" />Zoom Out</li>
	</ul>
</div>

＆＃13;

Answer 4

因此，正如在StackOverflow上提交提交问题时经常发生的那样，您就会找到解决问题的方法。

对于发现自己处于类似情况的其他人来说，这就是我解决问题的方法（加上我为什么要开始解决这个特定问题的一些背景）。实现的方法无论如何都不优雅（如果您找到更顺畅的解决方案，请在此处发布）。

这是我如何解决它的;将它放在for循环中：

images[i].outerHTML = images[i].outerHTML + "<br>";

愚蠢简单，尽管不简单。

** 编辑 ***

受到这里给出的选定答案的启发，我使用insertAdjacentHTML方法代替insertAdjacentElement提供了一种可以说更具语义性的方法来解决问题。因为我们实际上冒险主要插入元素，我认为这种方法可能是更好的选择。

// init the array
var images = [];
// collect all the img elements
images = document.getElementsByTagName("img");
// loop through the collection of img elements
for (var i = 0; i < images.length; i++) {
    // on each iteration, create a new <br> element and insert adjacent to the <img>
    var br = document.createElement("br");
    images[i].insertAdjacentElement('afterend', br)
}

（原始文章续）

我想将<br>标记作为<img>标记的第一个兄弟插入的原因是为了解决IE7中的显示问题，该问题未实现使用display: inline-block。事实上，我倾向于使用display: inline来拍摄我的照片。这造成了一个集中问题。图片代码为了受其<ul>的父text-align: center;样式声明的影响，需要在其自己的行上。但是，如果文本节点为<img>的直接兄弟，则img和文本最终都在同一行。

为了将img与其下方的文本居中，需要插入<br>标记以将两个元素分解到自己的行上。

example in the documentation

插入新元素作为内联元素

4 个答案: