I'm new to javascript. I'm trying to have my h1 show the title of the document instead (which is also Document by the way). Instead, it recognises 'title' as string and not as an id. I don't know what I'm doing wrong here. I also tried to add my roze div class to by using querySelectorAll, but this also is not working. Who can help me? I'm sure its something simple but I've been trying to understand this for the past 3 days...[][][][]
I've tried to use no '' in ('h1'), ('title') and ('p'). I've tried using . and # before ('h1'), ('title') and ('p'). I've tried removing id from title tag and h1 and have googled for methods but I still can't find an example of the specific method I have to do.
To get an DOM element by its id you should use document.getElementById('title'). To edit its text you should use its textContent property. The title of the docuemnt is stored in document.title.
Try the following markup:
document.getElementById('title').textContent = document.title
<h1 id="title">Dit is h1</h1>
Related
I am selecting a group of table rows by using the following line of JS:
document.getElementById('tab1_content').contentDocument.documentElement.getElementsByClassName("data1_smaller")
These represent entries in a table of contents. I want to return only those above which also contain the word 'CHAPTER', so I was attempting to use the jQuery :contains() selector to accomplish this and attempted to convert the entire thing into a single jQuery selector; so, to begin with, I tried converting the following invalid line:
document.getElementById('tab1_content').contentDocument.documentElement.getElementsByClassName("data1_smaller").$(":contains('CHAPTER')")
to this:
$("#tab1_content > contentDocument > documentElement > .data1_smaller:contains('CHAPTER')")
The selector above doesn't give an error but it fails to find anything. Does anybody know the correct way to do this?
You can achieve what you want with pure vanilla js just like you tried in the beginning. You just need to do some small adjustments to your code. You can use querySelectorAll() to query all elements matching a selector inside your ID. Something like this should work just by looking at your example, but might need some small adjustments.
[...document.getElementById('tab1_content').querySelectorAll(".data1_smaller")].filter((node) => node.textContent.includes('CHAPTER'))
// Edit, saw in the comments that you're accessing content in an iframe
[...document.getElementById('tab1_content').contentWindow.document.querySelectorAll(".data1_smaller")].filter((node) => node.textContent.includes('CHAPTER'))
I found this solution based on Anurag Srivastava's comments:
$("#tab1_content").contents().find(".data1_smaller:contains('CHAPTER')")
The issue was that I was trying to select things that are inside of an iframe and the the .contentDocument.documentElement that I used to access the iframe in JS has to be changed to .contents() in jQuery in order for it to work.
Neither contentDocument or documentElement are valid HTML tags. Try to select by id or class name.
I have a question regarding the modification of a value inside a class. I would like to change the value with Tampermonkey extension however I cant get it to work.
The initial code looks like this:
<div class="bzeTileValue bzeTileValueNegative">
<span class="bzeTileUnit">YYY</span>
<span>XXXX</span></div>
I would like to change the value of XXXX. Preferably before the site loads.
I tried already the document.getElementbyId("xxxxx").innerHTML=....; But couldn't get it to work unfortunately. Any help would be hugely appreciated.
Thanks a lot friends
The span containing XXXX is inside a div which has classes on it but no ID. This means that getElementById won't work. You can use Document.querySelector to get the div and then access the child nodes of that div. The span you are trying to access doesn't have any classes on it, but you can target it as the second child inside the div. Then you can change the value using innerHTML or innerText.
Altogether it looks like this:
document.querySelector('.bzeTileValue').children[1].innerHTML = 'New Value';
I'm trying to get to the div class="article" nested inside a div called div id="tabs=main from this a HTML-page that looks like this:
pastebin
I have tried something like this but with no result:
var targetAbs = doc.querySelectorAll("article");
Anyone have any tips for me? Not even sure I'm suppose to use this queryselector. I have also tried the getElementsByClassName, but I think since it's nested I can reach it.
doc isn't a standard variable provided by the browser. You are looking for document.
Class selectors begin with a .. "article" is a type selector and will match <article> elements.
As your element has a class of article, you need to use the following code:
doc.querySelectorAll(".article");
You need to place a . in front of the selector when it is referring to a class.
I'm working on displaying a graphic on a website. For some reason, when I inspect the element I see this:
<div id="canvas-daily" style="position:relative;" ng-if="currentMode == 'day'" class="ng-scope"><div class="circle-background"></div></div>
But when I do document.getElementById("canvas-daily") in my console I get a svg graphic inside the parent (canvas-daily) ID div. Why would this be happening and how can I fix/hack into this to append the content that is obviously there?
Edit - this answer has been rendered obsolete by edits the OP made to their question. It has not been deleted yet because of the conversation happening in comments.
To find the DOM element shown in the HTML in your question, you would just use this:
document.getElementById("canvas-daily")
Do NOT include the # in the string you pass to document.getElementById(). That is only used with more generic functions that accept CSS selectors like document.querySelectorAll(). document.getElementById() just takes a plain string that matches the ID you are looking for.
I have a div element on my web page with ID "map" with a link to Google inside of it.
<div id="map">
Google
</div>
I want to use jQuery to generate a paragraph after the link with an ID of "blurb," so the HTML akin to what the Javascript produces is
<div id="map">
Google
<p id="blurb"></p>
</div>
I have been experimenting with
$('#map').append('p').attr('id', 'blurb');
to no avail.
I am open to a Javascript, but non-jQuery way to do this as well. Thank you!
This should work:
$('#map').append('<p id="blurb"></p>');
Your method was the right general idea, but was just appending the text 'p' rather than the tag <p> and the id wasn't getting set on the right object because of the way jQuery chaining works for .append().
If you wanted to assign the id programmatically for some reason, then it's probably easier to do that this way:
$('<p>').attr('id', 'blurb').appendTo('#map');
First, set up all attributes, then append.
$('<p>').attr('id', 'blurb').appendTo('#map');
Your code doesn't work for two reasons. First of all append can take text and you must distinguish between text and HTML by using a tag (<p>) instead of p. The other reason is that chaining means jQuery's append function will return the jQuery object that it is called on. In this case an object refering to your map element. So when you set the id you were setting the id of the map div, not of your newly create element (assuming the <p> error was fixed). Also you should use prop to set the id instead of attr, but both will probably work for id. Here is some example code:
jQuery:
$('<p>').appendTo('#map').prop('id', 'blurb');
Plain Javascript (Faster, but less legible):
var pel = document.createElement('p');
pel.id = 'blurb';
document.getElementById('map').appendChild(pel);