Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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)
        }
    })
})
like image 907
Avinav Chalise Avatar asked Feb 20 '21 07:02

Avinav Chalise


People also ask

How do I append a div inside another div?

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.

How do you append to a div in HTML?

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

How do I append to innerHTML?

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.

Can you appendChild to a div?

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.


1 Answers

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

enter image description here

like image 143
Tushar Gupta - curioustushar Avatar answered Sep 29 '22 08:09

Tushar Gupta - curioustushar