Set ID of Body tag using JS or jQuery in tampermonkey

Question

I would like to add a hyperlink to a page using JS like this:

var TopLink=document.createElement("a");
TopLink.setAttribute("href", "#top");
TopLink.innerHTML = "Top";
TopLink.setAttribute("class", "btn btn-default btn-ref");
TopLink.setAttribute("style", "position:absolute; top:280px; right:40px; width:120px; background:yellow;");
document.body.appendChild(TopLink);

However, I need to update the <body> tag to have an ID value of top as it isn't there on the page.

I have tried various things, such as:

// using jQuery
$(document).ready(function(){
    $("body").attr('id', 'top');
});

// using vanilla js
var body_tag = getElementsByTagName("body");
body_tag.setAttribute("id", "top");

But neither work - how can I set the ID attribute of the body tag?

I had a look here first: assigning ID's to body tag using jquery

But it didn't answer my question.

Unclear what you are asking, of course setting the ID using that jQuery code works - https://jsfiddle.net/Lgaz6mvk/ — CBroe, Aug 19 '20 at 11:01
is there a reason why you don't simply edit the html and add the id? And what is the reason why you want to add the id?Since there is only 1 body. At least there should only be one :) I'm just asking to may provide a more suitable answere :) — Dwza, Aug 19 '20 at 11:07
Hi - sorry for the vague question. I want to add an ID to the body element, or any other element near the top of the page, so that I can write a JS script with Tampermonkey to add a button to jump to the top of the page. There are no suitable elements that exist, which I can use as an anchor link, so I wanted to add an ID to the Body tag. I have tried adding `document.body.id = "top";` to the JS page, but when the added button is clicked, it doesn't jump to mypage#top - maybe the ID value doesn't get added for some reason? — 4532066, Aug 19 '20 at 11:14
So I added an example in my answere, this should suite your problem, I guess :) And I also added the `Tampermonkey` tag — Dwza, Aug 19 '20 at 13:15

score 2 · Answer 1 · answered Aug 19 '20 at 11:01

This will work:

document.body.id = 'top';

getElementsByTagName returns an HTMLCollection, so you cannot call setAttribute on that. If I'm not mistaken, it needs to be prefixed with document. too.

I would imagine the jQuery method is failing because you're not using jQuery on the page. Anyway, no need to use jQuery for something so simple.

score 0 · Answer 2 · answered Aug 19 '20 at 11:02

0

You can change your body id like this:

document.body.id = "top"

answered Aug 19 '20 at 11:02

score 0 · Answer 3 · answered Aug 19 '20 at 11:03

0

Another way is that:

document.body.setAttribute("id", "top");

<body></body>

answered Aug 19 '20 at 11:03

Simone Rossaini

4,586
1
5
24

score 0 · Answer 4 · edited Aug 19 '20 at 13:35

It is not necessary to add the id.

However, if you want to add some to the body with jQuery in Tampermonkey you need some things...

First, include jQuery into your script like e.g.

// @require http://code.jquery.com/jquery-3.4.1.min.js

to use it in your anonymous function, you have to add it like

(function($) {
    'use strict';
    //source
})(window.jQuery);

Now you can run some things with jQuery. You can create whatever element you want and then append it to the body. In this example, I add a button to Google's body.

// ==UserScript==
// @name         Test
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.google.de/
// @require http://code.jquery.com/jquery-3.4.1.min.js
// @grant        none
// ==/UserScript==

(function($) {
    'use strict';

    let button = $("<button>Test</button>");

    button.appendTo('body');

})(window.jQuery);

You actually can copy this and add your own stuff to it.

You may have a look at Tampermonkey's documentation

See @match to add a better URL matching may using wildcard selector

See @require to add more or another script to your script. E.g. jQuery UI

NOTE:

I'm using (function(){...}); which will invoke itself as soon as the browser is interpreting your ECMA-/javascript. I guess on Tampermonkey it's always at the end here. But I'm not 100% sure.

Feel free to use $(document).ready(function(){ ... }); or short $(function(){...}); to make sure that the DOM is ready when running this script.

Set ID of Body tag using JS or jQuery in tampermonkey

4 Answers4