I'm using Angular 1.29 and Chrome.
I have some text like
<p>Text <strong> bold </strong> </p>
And I need to turn it into an element, because the library that I'm using, html2canvas, needs to be sent one.
So I've tried this, which I took from this answer
var div = document.createElement('div');
div.innerHTML = $scope.presData.text;
var element = div.firstChild;
html2canvas(element,{
onrendered:function(newCanvas){
document.getElementById("newPresentation").appendChild(newCanvas);
}
});
Where my text is in $scope.presData.text,
But that didn't work. This creates a canvas with a width and height of 0.
Using innerHTML of an HTML element should format them as document nodes.
var HTMLString = '<p>Text <strong> bold </strong> </p>';
var HTMLStringContainer = document.createElement('div');
HTMLStringContainer.innerHTML = HTMLString;
If you're having some issues with your canvas, I think your issue lies elsewhere.
Try this to set up your strings as html nodes... it is robust and will handle alot of different situation (multiple sibling nodes at the highest level for example). jsfiddle Demo
// HTML string
var s = '<p>Text <strong> bold </strong> </p>';
var div = document.createElement('div');
div.innerHTML = s;
var elements = div.childNodes;
//using your above canvas code
var element = elements[0];
html2canvas(element,{
onrendered:function(newCanvas){
document.getElementById("newPresentation").appendChild(newCanvas);
}
});
//multiple elements
//for(var i=0; i < elements.length; i++){
//html2canvas(elements[i],{
//onrendered:function(newCanvas){
//document.getElementById("newPresentation").appendChild(newCanvas);
//}
//});
//}
Related
I need to append some html to an existing element using pure javaScript:
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
var target = document.querySelectorAll(".container-right");
var fragment = create(
'<div class="freetext"><p>Some text that should be appended...</p></div>'
);
document.body.insertBefore(fragment, document.body.childNodes[0]);
It's kind of working, but I have two questions:
How can I make sure that the html fragment is appended to the div with the class container-right and not just the body? Changing the last line to document.body.insertBefore(fragment, target); doesn't work.
How can I insert the html after the content in the target element - after the existing content - like jQuery's append()?
Any help is much appreciated.
JsFiddle here.
Well, I know this works:
let elem = document.querySelector ( 'css-selector (id or class)' )
That should give you your element. Then you do this:
elem.innerHTML = elem.innerHTML + myNewStuff;
That'll append your html to the innerHTML of the element. I tried it quickly, it works.
var target = document.querySelector(".container-right");
var p = document.createElement('p');
p.innerHTML = "Some text that should be appended...";
var div = document.createElement('div');
div.appendChild(p);
var fragment = document.createDocumentFragment();
fragment.appendChild(div);
target.appendChild(fragment);
JSFiddle
Try this:
var target = document.querySelector(".container-right");
target.innerHTML += '<div class="freetext"><p>Some text that should be appended...</p></div>';
Based on this answer to a similar question, I have found that insertAdjacentHTML is a good fit for this kind of problems.
I haven't tested it on a Node List, but with a single node it works perfectly.
insertAdjacentHTML has a great browser compatibility (back to IE4), plus it lets you decide where you want to insert the HTML (see here).
var target = document.querySelector(".container-right");
var newContent = '<div class="freetext"><p>Some text that should be appended...</p></div>';
target.insertAdjacentHTML('beforeend', newContent);
document.querySelectorAll('.container-right').forEach(elm=>{
elm.innerHTML += '<div class="freetext"><p>Some text that should be appended...</p></div>';
});
I have ajax api response with array [1] which contains 5 text nodes [i].
I want to put each text node in separate <p> instead of all in one <p> as I did in my code, so I can make each of them links and put some text as description.
This is the markup,
<div class="container"></container>
And my code:
var p = document.createElement('P');
var container = document.querySelector('.container');
container.appendChild(p);
for(var i=0;i<parsed_json[1].length;i++){
p.innerHTML += parsed_json[1][i];
}
var container = document.querySelector('.container');
for(var i=0;i<parsed_json[1].length;i++){
var p = document.createElement('P');
var textnode = document.createTextNode(parsed_json[1][i]);
p.appendChild(textnode);
container.appendChild(p);
}
If I have a bunch of HTML code, similar to the following:
<div id='test0div'>
<p id='test0'></p>
</div>
How do I use JavaScript to add or remove more of those - i.e.
<div id='test1div'>
<p id='test1'></p>
</div>
<div id='test2div'>
<p id='test2'></p>
</div>
...etc.?
var container = document.createElement("div");
for(var i=0; i<5; i++) { // change i <5 as per your data source
var div = document.createElement("div");
var p = document.createElement("p");
p.id = "test"+i;
div.id = "test"+i+"div";
div.appendChild(p);
container.appendChild(div); // you can event append to particular id or body
}
// document.getElementById("divId").appendChild(container);
container, will have all the divs & p as you wish
This will give you the output you want. Just change the number of times the loop will execute based on your wish.
To remove you could use
$('#id').remove();
To add you could use
$("<div id='new'></div>").appendTo('#id');
I need to know if there is a "span" in my extracted content.
Simple js part, getting selection from textarea:
...
selection = this.getWin().getSelection().getRangeAt(0);
content = selection.extractContents();
alert(content)// this gets documentFragment
alert(content.firstChild)//null
fontEl = document.createElement ("span")
fontEl.appendChild(content);
alert(fontEl.outerHTML)// works ok. but now i have 2 spans if there was one before append
there is my jsfiddle. i test changing the font-size. it works, but it is spamming spans because of this problem.
http://jsfiddle.net/DCGRg/73/
Your code isn't far off. Here's an updated demo:
http://jsfiddle.net/DCGRg/73/
Here's the relevant piece of code:
var font_size = combo.getValue();
var selection = this.getWin().getSelection();
if (selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
var content = range.extractContents();
var fontEl = this.getWin().document.createElement("span");
fontEl.style.fontSize = font_size + 'px';
fontEl.appendChild(content);
range.insertNode(fontEl);
selection.selectAllChildren(fontEl);
}
I have a javascript function designed to dynamically append text to my document (and slides it down with JQuery). I create a new "p" element, and then I want to add text to it, but I need this text to have several formats. For example, I need the first part to be italicized, second part to be underlined, and third part to be white. As of now, I managed to get three different "div" elements with their own text nodes, each with their own style, but this makes it on three separate lines. I need it all on one line. Is there any way I can insert HTML tags into a text node, or somehow split the internal string up so I can style each part separately?
This code demonstrates the closest I got, but this puts each styled text node on different lines, and I need it all on one line in that p element:
function append_announcement(time_string, user_by, text){
newp = document.createElement("p");
head = document.createElement("span");
headt = document.createTextNode("You wrote: ");
head.appendChild(headt);
body = document.createElement("div");
bodyt = document.createTextNode(text);
body.appendChild(bodyt);
body.setAttribute("style", "color: white");
foot = document.createElement("div");
foott = document.createTextNode("Done.");
foot.appendChild(foott);
newp.appendChild(head);
newp.appendChild(body);
newp.appendChild(foot);
newp.setAttribute("align", "center");
newp.style.display = "none";
document.getElementById("announcement_posts").insertBefore(newp,
document.getElementById("announcement_posts").firstChild);
$("p").slideDown("slow");
}
Change the <div>s for <span>s, they're displayed inline by default.
Alternatively you could apply a class to the <div> elements you create and set that class to display: inline-block; using CSS.
Example
function append_announcement(time_string, user_by, text){
newp = document.createElement("p");
var i = document.createElement("i");
i.textContent = ("You wrote ");
var span = document.createElement("span");
span.textContent = text;
span.style.color = "white";
var u = document.createElement("u");
u.textContent = " Done.";
newp.appendChild(i);
newp.appendChild(span);
newp.appendChild(u);
newp.setAttribute("align", "center");
newp.style.display = "none";
document.getElementById("announcement_posts").insertBefore(newp,
document.getElementById("announcement_posts").firstChild);
$("p").slideDown("slow");
}
You want to create elements that display inline like <i>, <u> or <span>