如何将一个div中的HTML标签添加到另一个div中？

Question

如何将一个div中的HTML标签添加到另一个div中？

javascripthtmljquery

6

是否可以从可编辑

元素中附加HTML标签到另一个

元素中？我想制作一个HTML编辑器并实现自动预览。

这里是jsfiddle代码：https://jsfiddle.net/eqw8L4to/12/

以下是我尝试从.html中获取HTML标签并将其附加到.result的js代码：

$(document).ready(function() {
    $(".html").keydown(function(event) {
        var x = event.keyCode
        if (x == 27 && event.ctrlKey) {
            $(".result").html("")
            var y = $(".html").html()
            $(".result").append(y)
        }
    })
})

- Avinav Chalise

4个回答

0

你已经很接近了。使用.html方法来提供HTML。

尝试使用以下代码片段并将其添加到测试框中，你会看到它可以正常工作。

<div class='rendered'>blue text</div>

$(document).ready(function() {
    $(".html").keydown(function(event) {
        var x = event.keyCode
        if (x == 27 && event.ctrlKey) {
            $(".result").html("")
            var y = $(".html").text()
            $(".result").html(y)
        }
    })
})

body{
    margin:0;
}

.html{
    color: white;
    height:50vh;
    width:100vw;
    background-color:#1a1a1a;
}

.result{
    height:50vh;
    width:100vw;
    background-color:#f5ff5;
}

.rendered {
color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="html" contenteditable="true">
    
</div>

<div class="result">
    
</div>

- giraffesyo

-1

好的，既然您提到需要带有自动预览功能的HTML编辑器，我通过读取contenteditable div的输入文本并使用object.src = "data:text/html"将其转换为HTML，并在keyup时将其显示为iframe的src来尝试实现它。默认字符集为UTF-8。

我已经阅读了您的代码，但我对JQuery不是很熟悉...

因此，在标准JavaScript中，它可能是这样的：

const editor = document.querySelector(".editable-div");
const result = document.querySelector("iframe");

editor.addEventListener("keyup", () => {
  var html = editor.textContent;
  iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);

这是一个示例片段：

const editor = document.querySelector(".editor");
const result = document.querySelector("iframe");

editor.addEventListener("keyup", () => {
  var html = editor.textContent;
  result.src = "data:text/html;charset=utf-8," + encodeURI(html);
});

/*a paste function just as extra info*/
 
editor.addEventListener("paste", function(e) {
        e.preventDefault();
        var text = e.clipboardData.getData("text/plain");
        document.execCommand("insertText", false, text);
    });

/* all CSS is for demo snippet */

.editor {
  background-color: #000;
  height: 100px;
  width: 80vw;
  color: white;
  font: monospace;
  overflow-y: auto;
  white-space: pre;
  outline: none;
}

.result {
  background-color: rgb(255, 255, 255);
  width: 80vw;
  height: 100px;
  overflow-y: scroll;
}

<div class="editor" contenteditable>WriteCode</div>
<iframe class="result"></iframe>

这是它工作的图片：

希望我能帮到你。

- SK-the-Learner

我知道这样做的缺点（没有vh；没有position fixed等）。我只会将其附加到iframe上，以便可以有body标签等。 - Avinav Chalise

@AvinavChalise CSS只是为了演示片段，我已经更改了它...现在可以了吗？ - SK-the-Learner

我不是那个给它点踩的人。我真的很喜欢这段代码，只是我实际上想尝试通过追加或更改innerHtml来完成它。 - Avinav Chalise

@AvinavChalise，那不是我想说的话，如果你感到不舒服，对此我很抱歉，没有任何恶意。 - SK-the-Learner

innerHTML可以实现这一点，但需要使用更多的JavaScript代码，因为div或span没有src值，会打印出"data:text/html..."行。 - SK-the-Learner

-1

你需要知道你的编辑器使用哪个元素，但如果 div.html 是你想要获取预览文本的元素，你只需要删除双引号，就可以得到该元素的内容。

试试这个：

$(document).ready(function() {
    $(".html").keydown(function(event) {
        var x = event.keyCode;
        if (x == 27 && event.ctrlKey) {
            $(".result").html();
            var y = $(".html").html();
            $(".result").append(y);
        }
    })
})

- Haroldo Gondim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tushar Gupta - curioustushar · Accepted Answer

https://jsfiddle.net/cse_tushar/68na2mrq/8/

从可编辑的div获取文本，并将位置替换为结果HTML。

$(document).ready(function() {
  const el = $("div.html");
  const result = $(".result");
  el.keydown(function(event) {
    if (event.keyCode === 27 && event.ctrlKey) {
      result.html(el.text());
    }
  })
})