javascript insert test before </table> in textarea

javascript insert before
javascript insert html after element
javascript insertafter
javascript insert html before element
insertadjacenthtml is not a function
javascript insert div into div
append first child javascript
insert div before div javascript

I have a textarea for entering an actor and character into a table, with javascript, but have to have buttons to add the '<table class="xxxx">' and a separate button for the closing </table>, is there a way to modify the following code to add the new actor as character table row before the closing </table>, therefore eliminating the need for extra buttons?

function addtxt(input) {
var obj=document.getElementById(input);
var actortxt = document.getElementById('actor').value;
var chartxt = document.getElementById('character').value;
obj.value+="<tr><td>"+actortxt+"</td><td>as</td><td>"+chartxt+"</td></tr>";
}
<body style="background:grey">

<input type="text" id="actor"/>
<input type="text" id="character"/>

<div id="therefore"></div>

<script>
var i=0;
function addtxt() {
    i++;
    var actortxt = document.getElementById('actor').value;
    var chartxt = document.getElementById('character').value;
    if(i%3==1){
        var open1 = '<table class="xxxx">';
        var close1 = '';
        i=0;
    }else {
        var open1= '';
        var close1 = '</table>';
    }
    document.getElementById('therefore').innerHTML+=open1+"<tr><td>"+actortxt+"</td><td>as</td><td>"+chartxt+"</td></tr>"+close1;

}
document.addEventListener('click',addtxt,false);
</script>

</body>

HTML DOM insertBefore Method, The insertBefore() method inserts a node as a child, right before an existing child, which you specify. Tip: If you want to create a new list item, with text, remember  Then you can insert it like an element, with appendChild or insertBefore. Example that insert a text before #childDiv: var text = document.createTextNode('the text'); var child = document.getElementById('childDiv'); child.parentNode.insertBefore(text, child);

Create a temporary <div> and put the textarea html string into it.

Then manipulate the table element inside the temp <div> as if it was in the page.

Once done set the textarea value from the innerHTML of the temporary <div>

var editor = document.getElementById('editor')


var tempDiv = document.createElement('div');
tempDiv.innerHTML = editor.value;

var table = tempDiv.querySelector('table'),
  newRow = table.insertRow(),
  cell1 = newRow.insertCell(),
  cell2 = newRow.insertCell();

cell1.textContent = 'Row 2 Cell 1';
cell2.textContent = 'Row 2 Cell 2';

editor.value = tempDiv.innerHTML;
<textarea id='editor' rows="15" cols="200">

<p>Some other element</p>
<table>
 <tr><td> Row 1 Cell 1</td><td>Row 1 Cell 2</tr>
</table>

</textarea>

Element.insertAdjacentHTML(), insertBefore() method inserts a node before a reference node as a child of a specified parent node. If the given node already exists in the  Definition and Usage. The insertBefore() method inserts HTML elements before the selected elements. Tip: To insert HTML elements after the selected elements, use the insertAfter() method.

Never mind, with a bit of tinkering I have got this solution to work:

    function inserttext(tarea){
        var obj=document.getElementById(tarea);
        var maintext =  document.getElementById(tarea).value;
        var actortxt = document.getElementById('actor').value;
        var chartxt = document.getElementById('character').value;
        var chstr = '<tr><td>'+actortxt+'</td><td>as</td><td>'+chartxt+'</td></tr>';
//      alert('Main:'+maintext+'--'+'Actor:'+actortxt+'--'+'Char:'+chartxt+'--'+chstr);
        var position = maintext.indexOf('</table>');
//      alert('table close found at :'+position);
        var newtext= maintext.substr(0, position) + chstr + maintext.substr(position);
//      alert('New Text:'+newtext);
        obj.value=newtext;
    }

Node.insertBefore(), Insert an HTML structure after or before a given DOM tree element. structure in form of an HTML text string, you should make use of insertAdjacentHTML() . Insert an element after or before another. Insert an HTML structure after or before a given DOM tree element. The following helper function insertAfter() lets you insert a new element after an existing one in the DOM tree: function insertAfter(el, referenceNode) { referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling); }.

Insert an element after or before another, Description: Insert content, specified by the parameter, before each element in the set of text node, array of elements and text nodes, or jQuery object to insert before each <script src="https://code.jquery.com/jquery-3.4.1.js"></script>. Description: Insert every element in the set of matched elements before the target. A selector, element, array of elements, HTML string, or jQuery object; the matched set of elements will be inserted before the element(s) specified by this parameter. The .before() and .insertBefore() methods perform the same task.

.before(), Because for elements and text, we have methods append/prepend/before/after – they are shorter to write and can insert nodes/text pieces. I am looking for a JavaScript array insert method, in the style of: arr.insert(index, item) Preferably in jQuery, but any JavaScript implementation will do at this point.

Modifying the document, jQuery provides several methods, like append() , prepend() , html() , text() , before​() , after() , wrap() etc. that allows us to insert new content inside an existing  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

Comments
  • This Code Project example might help: codeproject.com/Articles/14995/…
  • thanks but I do not have the table on the page, the source <table></table> is in a textarea to save the table into a DB, which is working, but I need to add the <tr>....</tr> to the textarea before the </table>
  • I will take a look in the morning, at the moment none of these seem to work for me, please take a look here for my form link and see what I am looking for, enter the actor and character at the bottom and click 'add table start, then 'Add Cast Member' then 'Add Table End', I am trying to achieve this without having to add the <table> </table> buttons. I thought it would be as easy as locating </table> and inserting the <tr>....</tr> row before it, but how do I do this in JS?
  • Whole concept seems like a very strange approach when you could do it in the DOM instead of in a textarea. The DOM is a very powerful html parser