I need a simple and pure javascript script that toggle a custom tag (like <mytag>some text</my tag>) in a contenteditable div. Any ideas?
You cannot outright replace an element's tag with JavaScript.
However, you can create an element on the fly, and set the contents of that element to be the original element.
This can be seen in the following:
var e = document.getElementsByClassName('editable')[0];
e.onclick = function() {
var d = document.createElement('textarea');
d.innerHTML = e.innerHTML;
e.parentNode.replaceChild(d, e);
}
<div class="editable">Text</div>
As for toggling it, you'd need to set the element back to a <div>.
Hope this helps! :)
Related
My code follows:
g = document.createElement('div');
g.setAttribute("id", "divcontainer");
g.innerHTML = `
HTML GOES HERE
`
When I use this on a site, I want the div centered and visible, it is working in the fact that it creates the div (tested that in console) but I cannot see it.
I am not using JQuery but if I need to, I can. My goal is to have a UI type thing.
Your code only creates the element but doesn't add it to the DOM, in order to do that you have to use document.body.appendChild(element) and that will add the element to the body element, you can also use the same method to add the element inside and element that you select by id or by QuerySelector.
You can modify your code as follows :
g = document.createElement('div');
g.setAttribute("id", "divcontainer");
g.innerHTML = `HTML GOES HERE`;
document.body.appendChild(g);
If you want to add multiple elements you can use append() instead of appendChild().
document.body.append(g,g2,g3,g4)
Hope that helps!
I have a JavaScript program that will create an element each time a button is pressed.
I use:
var element = document.createElement("div");
element.innerHTML = "hi";
document.body.appendChild(element);
I want to make it so when a user creates an element by clicking the button, then it will generate the element's html code or the outerHTML. But I also want it to do this if the user clicked the first button multiple times. So that means that I want it to generate the outer html for every element they make when they push the button. For this, I use:
function CreateElement() {
var element = document.createElement("div");
element.innerHTML = "hi";
document.body.appendChild(element);
var code = element.outerHTML;
}
However, the problem is that there are multiple elements that were created that were under the variable "element". So I want the, "code" variable to contain the outerHTML of all of the elements. I've tried:
function createElement() {
var code = element.outerHTML;
code = code + element.outerHTML //will add the outer html to the variable each time a new element is created
}
...but it always just replaces the whole variable instead of adding the outerhtml to the variable each time the button is clicked to make an element. My goal is to make the variable "code" look something like "<div>hi</div> <div>hi</div>" (as a string)
Thanks for any help
Append each dynamic element into a single container, then take that container's innerHTML:
const container = document.querySelector('.container');
const button = document.querySelector('button');
function createElement() {
var element = document.createElement("div");
element.textContent= "hi";
container.appendChild(element);
console.log(container.innerHTML);
}
button.onclick = createElement;
<button>click</button>
<div class="container"></div>
Also, just a suggestion regarding element.innerHTML = "hi"; - best to only use innerHTML when deliberately setting or retrieving HTML markup. If you just have text, it's faster, safer, and more appropriate to use .textContent.
I have the following html element:
<h1>Some text</h1>
I need to detect a click and recognize whether it landed on the text part or the blank part of the element.
To preserve consistency of the rest of the app I cannot change the display of this element to inline or inline-block.
I also cannot modify the inner html of this element so splitting it into two <span> elements is not an option either.
The text inside this element is not constant and is in fact editable.
Can I detect a click only on the visible (text) part of this heading?
QUESTION "I also cannot modify the inner html of this element so splitting it into two elements is not an option either." does this mean after the fact or before the fact? i.e is it that you cannot alter the HTML or that you can't go in and mutate the HTML via JS ?
Current Solution:
I parse all elements with the .clickable identifier, remove & rebuild their text contents and place spans around them - this way i can add click listeners to the individual text/span elements - giving me access to the text itself.
const clickables = document.querySelectorAll('.clickable')
clickables.forEach(el => new Clickable(el))
function Clickable (el) {
const _handleClick = ({target}) => console.log(target.innerHTML)
const texts = el.textContent.split(/\s/)
el.innerHTML = ''
texts.forEach(t => {
const span = document.createElement('span')
span.innerHTML = `${t} `
span.addEventListener('click', _handleClick)
el.appendChild(span)
})
}
<h1 class="clickable">Some text</h1>
<h2 class="clickable">Some! more! text2</h1>
By the use of Jquery you can use the .click function to know if the h1 tag is clicked.
$('#test').click(function(){
alert("Clicked!");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id='test'>TEST</h1>
I have this code which creates an element but the problem i am facing is it appends it at the very bottom of the page, in order for this to work i need it to be positioned in a certain place in the DOM how can i do this ?
var x = document.getElementById('options_10528_1');
var pos = document.getElementById('options-10528-list');
x.onclick = function(){
var elem = document.createElement('div');
elem.setAttribute("class","uk-warning");
elem.innerHTML = "Unfortunately, we cannot supply this medicine. Please consult your GP.";
document.body.appendChild(elem);
}
afterWhichNode.parentNode.insertBefore(newNode, afterWhichNode.nextSibling);
This code will insert a node after the afterwichNode, thats using vanilla javascript, if you are using jquery, just use .after()
Currently you are appending the element in the body tag, it will always goes at bottom. So if you want to append the element in a specific position, you have to append it in that container. let say you want to append it in "pos", you can do this:
pos.appendChild(elem);
IE does not allow writing to the innerHTML property of style or head elements. So how do you copy a style element from the head of one document to another?
function copy_style(src_style_tag) {
var tmp_div = document.createElement('div');
var innerHTML = src_style_tag.innerHTML;
tmp_div.innerHTML = '<p>x</p><style type="text/css">' + innerHTML + '</style>';
return tmp_div.getElementsByTagName('style')[0];
}
The magic is that you need the <p> tag in the innerHTML of the tmp_div. Without it, IE does not accept the style element.
If you want to copy some elements, than try using Node.cloneNode(true) together with Node.appendChild