jQuery .append() not rendering html entity - javascript

I have a variable with html in it like this:
var html = '<div>Hello, you're awesome!</div>';
I want to append it to an element $("body").append(html) for some reason it's not decoding the HTML Entity. I tried $("body").append($(html)); and that didn't work. My text is stuck inside the element and I can't individually put it together.
Is there any way to append html with a text-based entity inside it into another element, and have the html entity render on the page?
I've read a bunch of posts on stackoverflow reguarding html entities and it seems that none of them include the html & text within a variable like this.

Try this:
var html = $('<div>Hello, you're awesome!</div>');
$("body").append(html)
Demo here

It could be possible that your page did not finish loading while the jQuery code was trying to append the content. Try:
$(document).ready(function (){
var html = '<div>Hello, you're awesome!</div>';
$('body').append(html)
});
And I would suggest using single quotations only unless you need to use escaped characters.

Related

Set string of html as Html just like innerHTML without JavaScript directly from .html file

In embedded ruby(html.erb) file,
I have a string of html like variable_string = "<p>Some <strong>Content</strong></p>".
Using Javascript we can just update DOM like Element.innerHTML = variable_string and the string will be rendered as html.
But I can't use JavaScript and want to do something like
<div innerHTML="<%= variable_string %>">
directly sort of inline way. Is it possible?
string.html_safe and other approach is ActionView::Helpers::SanitizeHelper

Load HTML content as text into div?

I'm using this code to grab html stored in a string into a div with contenteditable="true" (the string works, and if I manually place the code there it also works, but I need a way to "inject" html or whatever as text in it)
document.getElementById('content').innerHTML=txt
Problem is: It's not placing the html as text inside of it, but executing like it was part of the page. Is there a way around it? I need the HTML(javascript or whatever be written in the string) to be like text...
Use textContent instead to inject strings like this:
document.getElementById('content').textContent=txt
You should use textContent property:
document.getElementById('content').textContent = txt
for more information give a look on MDN

Is it possible to edit the contents of a <script type="text/template"> with JavaScript?

Here's an example of what I'm trying to edit:
<script id="login-popup" type="text/template">
<h3 id="cover-msg" class="modal-title">You need to login to do that.</h3>`
</script>
I would like to add: class="title" to the h3 tag. This is being done via a chrome extension, so I can't control the HTML that is rendered.
Here's the caveat: I can't assume that the template will always be the same, so I can't just replace or edit the entire thing. I need to be able to select certain elements within the text and only add things as needed.
The problem I'm having is that the template seems to just be plain text. So I can't select it with something like #login-popup #cover-msg. Please correct me if I'm wrong.
Is it possible to do this with JavaScript/jQuery?
You can follow this type of procedure which gets the text out of the script tag, inserts it into a DOM element so you can use DOM manipulation on it, then gets the resulting HTML out of that DOM element. This allows you to avoid any manual parsing of the HTML text yourself:
var t = document.getElementById("login-popup");
var div = document.createElement("div");
div.innerHTML = t.innerHTML;
$(div).find("h3").addClass("title");
t.innerHTML = div.innerHTML;
It follows this process:
Get the innerHTML from the script tag
Create a temporary div
Puts the HTML into the temporary div where you can then treat it as DOM elements
Using DOM query, find the <h3>
Adds the class to it
Get the HTML back out of the temporary div
Puts the HTML back into the script tag as the modified version of the template.
It works here: http://jsfiddle.net/jfriend00/mqnf1mmp/.

Is there a way to query the HTML in the Ace code editor?

When I'm editing HTML in the ace editor, is there a way to query that HTML in a simple way? With selectors?
[fake-html-dom].querySelectorAll("A").length
I read that when you use jQuery $('<html code>') the html gets inserted to the real DOM, I want to avoid actually running the HTML it in the window/iframe.
Would also be nice to be able to modify the found elements in the editor directly (like custom highlighting).
you can create a fake html document object like this:
var docImpl = document.implementation;
var fakeDoc = docImpl.createHTMLDocument("myhtml"/*it is just a title*/);
as you use a Ace html editor first you should read the html string from the editor, then extract the body content and finally insert it to the fake body. these are your steps to take:
//Ace usually uses ace_text-layer as the classname for the html string part
var htmlContent = document.querySelector(".ace_text-layer").innerText;
//you can also change this part if it didn't work, depends on your Ace version
now you should extract the body content, if it has <html> or <body> tags in it:
var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
var array_matches = pattern.exec(htmlContent);
var extractedContent = array_matches[1];
then insert it to the fake body
fakeDoc.body.innerHTML = extractedContent;
and finally do any desired query you might need:
fakeDoc.querySelectorAll("A").length

Parse and add extra data to CKEditor before save

I'm using the CKEditor.
I need to add text around the html outputted by CKEditor (i.e., an opening and closing tag around the html output; not an html tag).
Is there any way of doing this?
Thanks
you can get the html data within the editor via .getData()
Something like this might work for you:
var wrappedOutput = '<div>'+ CKEDITOR.instances.NameOfEditorInstance.getData() +'</div>';
Here is a link to the docs pointing to .getData()

Categories

Resources