Is it possible to append html tags from a content-editable div to another div? I wanted to make an html editor, and I wanted to make automatic preview.
Here is the jsfiddle code: https://jsfiddle.net/eqw8L4to/12/
And here is the js code where I tried getting html tags from .html, and tried appending it to .result:
$(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)
}
})
})
With . append(), the selector expression preceding the method is the container into which the content is inserted. With . appendTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.
HTML code can be appended to a div using the insertAdjacentHTML() method. However, you need to select an element inside the div to add the code. This method takes two parameters: The position (in the document) where you want to insert the code ('afterbegin', 'beforebegin', 'afterend', 'beforeend')
To use the innerHTML property to attach code to an element (div), first pick the element (div) where you wish to append the code. Then, using the += operator on innerHTML, add the code wrapped as strings.
Use appendChild to Append Data to Div in JavaScript Like the previous method, we first select the div by using one of the selectors. But instead of innerHTML , we use appendChild because of the problems discussed in the previous method. Before appending a child, we have to create the text node.
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());
}
})
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With