Whenever the user hits the "Enter" key, a new element will be generated and added to the bottom of an existing element

Question

Whenever the user hits the "Enter" key, a new element will be generated and added to the bottom of an existing element

I am in need of creating a new element at the end of another element. For instance, let's say I have this element:

<div id="elmtobetrig">Element that should be followed by another element when the user hits enter after this text. <!--Element placeholder--></div>

I have tried the following code:

<div contenteditable="true" id="elmtobetrig"></div>
    <script>document.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
      document.querySelector("div#elmtobetrig").createElement("line").innerHTML = "<br> This content should appear at the bottom of the element &nbsp; "
    }
  });</script>

However, it seems that using createElement() on a specific element is not possible... Is there an alternative way to achieve what I am attempting?

javascript html css

Answer 1

Answer №1

It seems like there is an issue with how you are creating the line element.

First, you should utilize the document.createElement method
Next, use .innerHTML to insert text into the element.
Finally, make sure to use .append to add the element to a parent element.

<div contenteditable="true" id="elmtobetrig"></div>
<script>
  document.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
      let line = document.createElement("line")
      line.innerHTML = "<br> this should go to the bottom of the element &nbsp; "
      document.querySelector("div#elmtobetrig").append(line)
    }
  });
</script>

Explanation

The createElement() method creates the specified HTML element using the provided tagName, but it does not automatically append the element to any parent.

Remember to create the element, set its attributes, and then ensure that you append it to a parent element. If you skip the appending step, the element will not be added to the DOM correctly.

Answer 2

It seems like there is an issue with how you are creating the line element.

First, you should utilize the document.createElement method
Next, use .innerHTML to insert text into the element.
Finally, make sure to use .append to add the element to a parent element.

<div contenteditable="true" id="elmtobetrig"></div>
<script>
  document.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
      let line = document.createElement("line")
      line.innerHTML = "<br> this should go to the bottom of the element &nbsp; "
      document.querySelector("div#elmtobetrig").append(line)
    }
  });
</script>

Explanation

The createElement() method creates the specified HTML element using the provided tagName, but it does not automatically append the element to any parent.

Remember to create the element, set its attributes, and then ensure that you append it to a parent element. If you skip the appending step, the element will not be added to the DOM correctly.

Whenever the user hits the "Enter" key, a new element will be generated and added to the bottom of an existing element

Answer №1

Explanation

Similar questions

What is the best way to initiate a TouchEvent in a qunit test being run by grunt using only vanilla JavaScript?

Is there a way to immobilize an object in JavaScript without resorting to Object.freeze()?

Do we need to use the render method in ReactJs?

Can a JavaScript function spontaneously run without being called upon?

It is not possible to alter or manipulate dynamic content received from an Ajax/JSON response when creating a dynamic PHP form

Success message displayed for Ajax form submission, yet email delivery remains pending

Tips on utilizing browser scroll for horizontal overflow of internal div?

Utilize JQuery scripting to input Checkbox values

Utilizing previously written HTML code snippets

The placement is set to absolute, with a designated height

Is React.js susceptible to XSS attacks through href attributes?

phpif (the current date is after a certain specific date, do

Creating a radial gradient texture using CSS

The original items are not utilized by jquery-ui autocomplete

Tips for declaring the project npm registry within the package.json configuration file

Utilize the fetch function to showcase information retrieved from a specific endpoint on a webpage using Javascript

Encountering an "Unmet Peer Dependency" error message while attempting to integrate bootstrap-ui into my Angular project

When you hover over a Wordpress page, the entire text on the page will be underlined

Is it possible that the passing of Form Serialize and list to the controller is not functioning properly?

Tracking Time Spent in a Tab using HTML and JavaScript