How to append html tags from an div onto another div?

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

Get the text from contenteditable div and replace place in the result 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());
    }
  })
})

You're pretty close. Use the .html method to provide the html instead.

Try this snippet and add the following to the test box and you'll see it is working.

<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>

You have to know which element your editor are using, but if div.html is the element that you want to get the text to preview, you just gotta remove double quotes and you'll get the content of element.

Thy this:

$(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);
        }
    })
})

Well, as you’ve mentioned that you need an HTML editor with automatic preview, I tried it by reading the contenteditable div’s input as text and then convert it to HTML using object.src = "data:text/html" with a default charset: UTF-8, and show it as the src of an iframe on keyup.

I’ve read your code, but I am not very well-versed in JQuery...

So, in standard the JavaScript it would be something like this:

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);

Here’s an example snippet:

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>

Here’s an image of it working:

Hope I could help.