如何使用 javascript 编写 html div 内容？答案

【问题标题】：how to write html div content using javascript?如何使用 javascript 编写 html div 内容？
【发布时间】：2023-03-03 10:36:01
【问题描述】：

我正在尝试在 D3 树上创建一个浮动视频播放器 (http://bl.ocks.org/csarsurvey/8999077)。

Brightcove 有一个工作示例，包括 Html、CSS 和 Javascript。见

https://docs.brightcove.com/en/player/brightcove-player/samples/floating-video.html

以下代码应通过javascript动态创建：

<div id="playerWrapper" class="drag">
<iframe src='//players.brightcove.net/1752604059001/15933ac1-884c-40e0-8cae-a06c7d9e4c0a_default/index.html?videoId=4511340777001' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

我编写了以下函数，但这会破坏树并创建一个新页面，而不是按预期浮动在树上。

    function node_onMouseOver(d) {
    if (!d._children) {
        document.body.innerHTML="<div id=" +
        "\"playerWrapper\"" +
        " class="   + 
        "\"drag\"" +
        " style=" +
        "position:fixed;top:246px;left:984px;" + ">" +
     "<iframe src="  +
     "video.html " +
     "allowfullscreen=" +
     "\"\"" +
     " webkitallowfullscreen="  +
     "\"\"" +
    " mozallowfullscreen=" +
     "\"\"" +
     " frameborder=" +
     "\"0\"" +
     " width=" +
     "\"650\"" +
     " height=" +
     "\"500\""  +
    " ></iframe> </div>"
            }
    }

如何根据用户事件在最初位于指定节点的树顶部创建浮动可拖动视频？

热烈的问候， KrikKrak

【问题讨论】：

使用 appendChild，而不是 innerHtml
您添加的代码没有为我创建浮动 div。但是，我已经使用 javascript 重新创建了代码。如果你愿意，我会把它作为答案发布。
Umashankar Das，是的，请发布代码。

标签： javascript html css d3.js

【解决方案1】：

function node_onMouseOver(d) {
    if (!d._children) {
        var el = '<div id="playerWrapper"  class="drag"  style="position:fixed;top:246px;left:984px;" <iframe src="video.html" allowfullscreen=""' +
            ' webkitallowfullscreen=""  frameborder="0"  width="650"  height="500"></iframe> </div> ';

        $('#ID').append(el);
    }
}

我希望它的工作。

【讨论】：