Develop Reference

Items inside flexbox not interactable

I have an interactive map generated using svg paths. Whenever I click a path, a container should appear containing some infos and links regarding that area.
The problem I have encountered is that nothing inside this container can be interacted with (ie. click links).
Items inside the container are generated using JS from a JSON file.
JSON reading works, although not over codepen, i dont know why (doesnt matter). You can see the code live here.
Here's my code: https://codepen.io/yasinibraim/pen/YzVVBMm
Short summary of the code:
SVG map inside svgContainer div
responsive info container inside containerInfo div
items inside containerInfo div generated inside clickUAT JS function. JSON fetched inside loadJSON function.
This is how i generate the content of containerInfo:
for (let i in actual_JSON){
if(actual_JSON[i].uat == caller){
if(firstItem == 1){
//newElement = document.createElement("ul");
}
header = document.createElement("p");
newElement = document.createTextNode (actual_JSON[i].title);
header.appendChild(newElement);
newElement = document.createElement ("a");
newElement.setAttribute('href',actual_JSON[i].link);
newElement.innerHTML = "Citește";
header.appendChild(newElement);
container.appendChild(header);
}
console.log(actual_JSON[i].Title);
}

Do you mean the links inside <div id="containerInfo" class="fadeIn"> when you click on a region?
This is because you have pointer-events: none; on the container, which will affect the children as well.
You either need to add pointer events to <a> element, or add pointer events back to #containerInfo when it becomes visible.

Get all child nodes javascript

Hi I am trying to add a html with a SPACE after in a contenteditable div;
The problem is that, with above code it only return the content of the first DIV and ignore everything else.
var tdiv = document.createElement('div');
tdiv.innerHTML = '<div>testing html</div> ';
var replacment = tdiv.firstChild; //
el.insertNode(replacment); // it is just the purpose, "el" is the HTML element
With this the nbsp will be removed.

If you want all children of tdiv to be added to el then try
var el = document.getElementById('x')
while (tdiv.firstChild) {
el.appendChild(tdiv.firstChild);
}
Demo: Fiddle

You can create an element with an nbsp in it like this:
var div = document.createElement("div");
div.innerHTML = " ";
If you really just want an element with a space of text, you can just create a text node:
var div = document.createElement("div");
div.appendChild(document.createTextNode(" "));
Looking at your question again, it is actually quite unclear what you're really asking and it appears that there are many different things your question might mean. So, this is just one possibility for what you might be asking.
If you want to add it as an element, then you need to put it in some sort of container since a non-breakingspace isn't an element by itself. You can wrap it in a <span> element like this and then insert the <span>.
var span = document.createElement("span");
span.innerHTML = " ";
el.appendChild(span);
Or, maybe it works just fine to insert a text node with a space in it:
el.appendChild(document.createTextNode(" "));

After Arun P Johny Idea I resolved like this:
var replacement = '<div>testing</div> ',startAfter,i,tdiv = document.createElement('div');
tdiv.innerHTML = replacment;
replacment=document.createDocumentFragment();
while(i=tdiv.firstChild) replacment.appendChild(i);
startAfter = replacment.lastChild;
// This is my extra code to the contenteditable div insert and positioning the caret - this.range is my selection range.
this.range.insertNode(replacment);
this.range.setStartAfter(startAfter);
Thank you all, even for the down votes :P

Appending new paragraphs

Been stuck on this for a while now, trying to add multiple new p elements to a div but it is just adding the content to the first one instead of creating a new one.
var p = document.createElement("p");
var output = document.getElementById('output');
function on button press
p.appendChild(document.createTextNode("hello"+"\n"));
output.appendChild(p);
Thanks for any help in advance, I need a solution where i'm allowed an infinite amount of new paragraphs until a condition is met.

The problem is that you create only one paragraph but append multiple text nodes in it. Despite on how it looks, output.appendChild(p) doesn't append initial p more then once. In fact, if the element is already in DOM (like in your case afther the first click), appendChild simply moves element to a new location. But in your case new location is the same as the original. So as the result, you only create new text node with every click.
You need to create new HTMLParagraphElement on every click:
document.querySelector('button').onclick = function() {
var p = document.createElement("p");
var output = document.getElementById('output');
p.appendChild(document.createTextNode("hello"+"\n"));
output.appendChild(p);
};
<button>Click</button>
<div id="output"></div>

Document Create Full Element

I'm making a little app, which has to append 3 elements to another element, by using this code:
var MyElem1= document.createElement("div");
ParentElem.appendChild(MyElem1);
This works just fine, but i was wondering if there is a way to create a full element, like this for example:
var MyElem1= document.createElement('<div style="some-styling: here;">Some InnerHtml Here</div>');
ParentElem.appendChild(MyElem1);
I know i can add those properties to the element after i create it, but i'm hopping there's a way to do it inline like that (Something that works cross-browser).
I saw on W3Schools (yes i know i should stop using it) the createElement function requires only the element type (div, span, button, etc...).

You could create a dummy container and create all elements you want inside it by replacing its innerHTML property, and then getting the .firstChild.
Here is a reusable function for it
var elementFactory = (function (){
var dummy = document.createElement('div');
return function(outerHtml){
var node;
dummy.innerHTML = outerHtml;
node = dummy.firstChild;
dummy.removeChild(node);
return node;
}
})();
and use it like this
var MyElem1 = elementFactory('<div style="some-styling: here;">Some InnerHtml Here</div>'),
MyElem2 = elementFactory('<div style="some-other-styling: here;">Some Other InnerHtml Here</div>');
Demo at http://jsfiddle.net/5De3p/1/

Change some look for html on basis of selection of text

In my app there is an html file showed in a webview. I have a note functionality where when user selects text, it is highlighted and an image is added as suffix. This note is then saved as an html file.
So for this functionality, I have written a java script function.
function highlightsText()
{
var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var newDate = new Date;
var randomnumber= newDate.getTime();
var div;
var imageTag = document.createElement("img");
imageTag.id=randomnumber;
imageTag.setAttribute("src","notes.png");
var linkTxt = document.createElement("a");
linkTxt.id=randomnumber;
linkTxt.setAttribute("href","highlight:"+randomnumber);
linkTxt.appendChild(selectionContents)
div = document.createElement("span");
div.style.backgroundColor = "yellow";
div.id=randomnumber;
linkTxt.appendChild(imageTag);
div.appendChild(linkTxt);
range.insertNode(div);
return document.body.innerHTML+"<noteseparator>"+randomnumber+"<noteseparator>"+range.toString();
}
Here I am making a span and this span holds my highlighted text with image.
Now problem is,
When I am selecting a paragraph, it only adds an image and does not highlight the text.
If I use div or p tag in place of span then it gives an entire line for a single word which looks rather odd.

Edit: div tags will get a linebreak before and after (usually, most browsers do this, considering it is a "division"/block level element), you're better off using a span.
And secondly you should append the selection contents to the span
ispain.appendChild(selectionContents) !! and do not forget the semicolon ;)
on a side note, you do know that:
1- you can't have html element ids starting with digits.
2- having more than one elements with the same id is gonna get unpredictable when you're selecting em.