Question

我有两个变量。一个用于视频元素，另一个用于源。

var videoHTML = this.elem.innerHTML;
//Output: <video data-echo="path/video.mp4"></video>

var sourceVideo = "<source" + " " + "src=\"path/video.mp4\"" "type=\"video/mp4\"" />";
//Output: <source src="path/video.mp4" type="video/mp4" />

我正在尝试创建一个结合了它们的第三个变量。像...这样的东西。

var videoHybrid = videoHTML + sourceVideo;

// Output: <video data-echo="path/video.mp4"></video>
//         <source src="path/video.mp4" type="video/mp4" />

如何创建变量会产生以下结果？

<video data-echo="path/video.mp4">
    <source src="path/video.mp4" type="video/mp4" />
</video>

Answer 1

要做到这一点，你可以简单地获得你所拥有的src作为sourceVideo并将其附加到主videoHTML代码。

我想请你使用jQuery，并执行此操作：

videoHTML.find('video').append(sourceVideo);

为什么我这样做，是因为你有一个HTML内容作为变量，jQuery会为你找到。然后将变量（也是一个HTML字符串）附加到第一个变量。

这样，你的HTML

<video data-echo="path/video.mp4">
   // nothing..
</video>

会得到这个

<source src="path/video.mp4" type="video/mp4" />

作为其子元素！

Answer 2

只要videoHTML只有一对匹配元素，就会这样做，如例子所示：

videoHybrid = videoHTML.replace(/></, '>' + sourceVideo + '<');

如果它更复杂，最好使用像appendChild()这样的DOM操作方法。

仅使用变量，如何将子项附加到父项？

2 个答案: