Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Creating an inline-block element using the createElement function

I need to add an <a> link to the end of a paragraph – using a function.

I tried to add a element.style.display = "inline-block" to it – but that doesn’t seem to work.

I guess I must put the <a> inside the <p> itself, but I haven’t seen anything about that anywhere, I know there is only:

a getElementById(idName).appendChild(letA) – which adds the element after the specified html element.

and getElementById(idName).insertBefore(letA) – which adds the element before the html element or replaces it with one of its children.

Is there any way in JavaScript to make something like that:

<p>
   blah blah blah blah blah blah blah
   blah blah blah blah blah blah blah
   blah blah blah blah blah blah blah
   <a>
</p>

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p>
        fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
        <br>
        <br>
        fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
        <br>
        <br>
        fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
        <br>
        <br>
        fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
        <br>
        <br>
        fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
        <br>
        <br>
        fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
        <br>
        <br>
        fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
        <br>
        <br>
        fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
        <br>
        <br>
        fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
    </p>
    
    <script>
        let cube = document.createElement('a');
        cube.style.color = "white";
        cube.style.backgroundColor = "green";

        cube.innerHTML = "hellow whats uppp!!!!"

        document.body.appendChild(cube);

    </script>
</body>
</html>
Tags:

2

Answers


  1. 0

    You’ll need to use appendChild on the DOM element you want it to be a child of, in your case the <p>

    const cube = document.createElement('a');
cube.style.color = "white";
cube.style.backgroundColor = "green";
cube.innerHTML = "hellow whats uppp!!!!"
cube.href = 'https://stackoverflow.com';

const paraf = document.querySelector('p')
paraf.appendChild(cube);
    <p>
    fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
    <br>
    <br>
    fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
    <br>
    <br>
    fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
    <br>
    <br>
    fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
    <br>
    <br>
    fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
    <br>
    <br>
    fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
    <br>
    <br>
    fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
    <br>
    <br>
    fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
    <br>
    <br>
    fsdfdfkdsfsmdfskfsgsv snbk skv sdnsskfjdsfskdfsfs
</p>
    Login or Signup to reply.
  2. 0

    At first you must create element.
    Then you need to edit it with href or text.
    And then use appendChild().
    If you want to add it at the beginning use prepend();

    let myTargetParagraph = document.getElementById("IdOfMyElement");

let a = document.createElement("a");
a.textContent = "My desired text";
a.href = "https://www.example.com";

myTargetParagraph.appendChild(a);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search