I'm trying to add an element in a webpage using the browser console.
My element is something like:
<a class="myclass" role="myrole" href="/url.com">
<span class="Label">Hello World</span>
</a>
How can I do this ?
document.getElementById('myid').innerHTML = "<a class='myclass' role='myrole' href='/url.com'><span class='Label'>Hello World</span></a>";
You can add a dummy div or tag with some ID and use this code
HTML:
<div id="myid">
</div>
function addElem(elem, text)
{
var elem = document.createElement(elem), // element to be created
text = document.createTextNode(text); // text node
bd = document.body; // get body
elem.appendChild(text); // elem appended with text
bd.appendChild(elem); // body appended with elem
return elem;
}
call it as so: addElem('p', 'text here');
call from console and see :)
try here itself
open your console,
var _el = '<a class="myclass" role="myrole" href="/url.com"><span class="Label">Hello World</span></a>';
$('.post-text').append(_el);
Related
I want to copy a text that has the CSS class copytext
and want to paste on the same page that's has CSS class pastehere.
I am using the following code, but with no result.
function copyToClipboard(text) {
const elem = document.createElement('.copytext');
elem.value = text;
document.body.appendChild(elem);
elem.select();
document.execCommand('.pastehere');
document.body.removeChild(elem);
}
I think you want to get the value of an HTML tag or something? with DOM Element innerHTML you can get the value of the Tag. eg:
html:
`<p id="myTag">hello world</p>`
javascript:
`let var1 = document.getElementById("myTag").innerHTML;`
the 'hello world' is now stored in the variable 'var1' and you can continue to work with it normally
If you want to copy text from all elements .copytext to the element .pastehere:
HTML:
<div class="copytext">Line 1</div>
<div class="copytext">Line 2</div>
<div class="copytext">Line 3</div>
JS:
function fun(text){
let copiedText = "";
text.forEach(element => {
copiedText += element.textContent + "\n";
});
const resault = document.createElement('div');
resault.classList.add('pastehere');
resault.innerText = copiedText;
document.body.appendChild(resault);
}
let copyFrom = document.querySelectorAll('.copytext');
fun(copyFrom);
You'll get:
<div class="pastehere">
Line 1 <br>
Line 2 <br>
Line 3 <br>
</div>
If you want to create element with the text you pass to the function as an argument:
JS:
function fun(text){
let resault = document.createElement('div');
resault.classList.add('pastehere');
resault.innerText = text;
document.body.appendChild(resault);
}
let text = "My text";
fun(text);
You'll get:
<div class="pastehere">
My text
</div>
!! Note that you can only type a tag name in document.createElement('');
You can use
document.getElementById("ID NAME")
To copy.
To change you can use
document.getElementsByClassName("class-name").style[0] = "max-width: 10%;"
There is the following HTML code:
<body>
<menu>
</menu>
... other html
</body>
I need to replace <menu> tag with HTML content from variable. I know how I can change innerHTML using string variable with content (variable 'template');
menu.innerHTML = template;
Variable 'template' contains '<ul class="menu"></ul>'. As result I want to have the following HTML:
<body>
<ul class="menu">
</ul>
... other html
</body>
You mention innerHTML; there's a corresponding outerHTML property that, when set, will replace the element and all children with your update:
var menu = document.getElementsByTagName('menu')[0];
menu.outerHTML = template;
Try:
var body = document.getElementsByTagName('body')[0];
body.innerHTML = body.innerHTML.replace(/<menu>[\s\S]*?<\/menu>/, template);
Try this
var str = '<ul class="menu"></ul>';
var menu = document.getElementsByName('menu');
var parentMenu = menu.parentNode;
parentMenu.removeChild(menu);
parentMenu.innerHTML = str + parentMenu.innerHTML;
try this
var elem = document.getElementsByTagName('body')[0]; // Select any element you want.
var target = elem.innerHTML;
elem.innerHTML = target.replace(/(<menu)/igm, '<ul class="menu"').replace(/<\/menu>/igm, '</ul>');
I did this:
var blah = document.getElementById('id').getElementsByClassName('class')[0].innerHTML;
Now I have this in bar:
<a class="title" href="http://www.example.com/" tabindex="1">Some text goes here</a> <span class="domain">(foobar.co.uk)</span>
I want to read the string "Some text goes here" from the HTML using JS (no jQuery). I don't have access to the site's HTML. I'm parsing a webpage to inject JS for a browser extension.
Will I just have to parse it as a string and find my text from between > and < or is there a way to parse innerHTML in JS?
Basic HTML markup that I am assuming you have:
<div id="id">
<div class="class">
<a class="title" href="http://www.example.com/" tabindex="1">Some text goes here</a> <span class="domain">(foobar.co.uk)</span>
</div>
</div>
So select the anchor and read the text
var theAnchorText = document.getElementById('id').getElementsByClassName('class')[0].getElementsByTagName("a")[0].textContent;
if you need to support IE8
var theAnchor = document.getElementById('id').getElementsByClassName('class')[0].getElementsByTagName("a")[0];
var theAnchorText = theAnchor.textContent || theAnchor.innerText;
and if you are using a modern browser, querySelector makes it a lot cleaner
var theAnchorText = document.querySelector("#id .class a").textContent;
You could approach this two ways. A regexp or textContent on a temp DOM element:
var foo = "<b>bar</b>";
function regexpStrip(str) {
return str.replace(/<[^>]*>/g, '');
}
function parseViaDOM(str) {
var el = document.createElement('div');
el.innerHTML = str;
return el.textContent;
}
console.log(regexpStrip(foo)); // => "bar"
console.log(parseViaDOM(foo)); // => "bar"
Totally newbie. Want to delete last 3 char in youtube views throw js
<div id="divid">
<span class="classid">
CHANGE IT
</span>
But this code only changing classid.
document.body.innerHTML = document.body.innerHTML.replace(new RegExp('classid', "g"), 'classid'.innerHTML="New text!");
If you want to change content of your span element, you can try something like this...
Live Demo
var ele = document.querySelector(".classid");
ele.innerHTML = ele.innerHTML.trim();
ele.innerHTML = ele.innerHTML.slice(0, -3);
The following code prints
This should print(b)This should print(/b)This should print
<script>
function produceMessage(){
var msg= '<b>This should print</b>';
return msg;
}
</script>
<span id="mySpan"></span>
<script>
document.body.appendChild(document.createTextNode(produceMessage()));
document.write(produceMessage());
document.getElementById('mySpan').innerHTML=produceMessage();
</script>
No, a text node will not print any HTML. Instead, create an element, or use a document fragment to insert HTML in that way.
function boldHTML() {
var element = document.createElement("b");
element.innerHTML = "Bold text";
return element;
}
document.body.appendChild(boldHTML());
will print Bold text.