f



Why newly inserted area is not editable?

HTML:
<table id="TBL">
  <!-- ... dynamically inserted TR or TRs without respective ID or IDs -->
  <tr id="last10" style="display:none">
     <td></td>
  </tr>
</table>	

Javascript:
	if (document.getElementById('last10').previousSibling) {
		console.log("PreviousSibling EXIST==============");
		document.getElementById('last10').previousSibling.contentEditable = true;
	}

Intention:
To make the newly or dynamically inserted area editable. Ignore how they are inserted (it's working).

Outcomes:
Firefox version 50 with its console log indicated that the PreviousSibling exits, however, 
the new inserted area (TRs and their TDs) is not editable.

Question:
What's wrong?

Thanks.	
0
justaguy
12/8/2016 9:39:21 PM
comp.lang.javascript 38370 articles. 0 followers. javascript4 (1315) is leader. Post Follow

4 Replies
86 Views

Similar Articles

[PageSpeed] 37

On Thu, 8 Dec 2016 13:39:21 -0800 (PST), justaguy wrote:

> HTML:
> <table id="TBL">
>   <!-- ... dynamically inserted TR or TRs without respective ID or IDs -->
>   <tr id="last10" style="display:none">
>      <td></td>
>   </tr>
> </table>	
> 
> Javascript:
> 	if (document.getElementById('last10').previousSibling) {
> 		console.log("PreviousSibling EXIST==============");
> 		document.getElementById('last10').previousSibling.contentEditable = true;
> 	}
> 
> Intention:
> To make the newly or dynamically inserted area editable. Ignore how they are inserted (it's working).
> 
> Outcomes:
> Firefox version 50 with its console log indicated that the PreviousSibling exits, however, 
> the new inserted area (TRs and their TDs) is not editable.
> 
> Question:
> What's wrong?
> 
> Thanks.

previousSibling may not be an element node, depending on where you've
inserted the dynamically created TR element. You don't ignore that.
0
JJ
12/8/2016 11:25:44 PM
JJ wrote:

> previousSibling may not be an element node, depending on where you've
> inserted the dynamically created TR element. You don't ignore that.

The “previousElementSibling” property introduced with DOM4 can provide an 
easier workaround than an XPath expression (supported by an implementation 
of DOM Level 2 XPath) or sibling node iteration.  Likewise, before one 
writes an XPath expression, or attempts to iterate over child nodes, or 
resorts to a library, one should check if the “firstElementChild”, 
“lastElementChild”, or “children” properties are implemented that are 
specified there.

<https://www.w3.org/TR/dom/#nondocumenttypechildnode>
<https://www.w3.org/TR/dom/#parentnode>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.
0
Thomas
12/8/2016 11:53:31 PM
On Thursday, December 8, 2016 at 6:53:37 PM UTC-5, Thomas 'PointedEars' Lah=
n wrote:
> JJ wrote:
>=20
> > previousSibling may not be an element node, depending on where you've
> > inserted the dynamically created TR element. You don't ignore that.
>=20
> The =E2=80=9CpreviousElementSibling=E2=80=9D property introduced with DOM=
4 can provide an=20
> easier workaround than an XPath expression (supported by an implementatio=
n=20
> of DOM Level 2 XPath) or sibling node iteration.  Likewise, before one=20
> writes an XPath expression, or attempts to iterate over child nodes, or=
=20
> resorts to a library, one should check if the =E2=80=9CfirstElementChild=
=E2=80=9D,=20
> =E2=80=9ClastElementChild=E2=80=9D, or =E2=80=9Cchildren=E2=80=9D propert=
ies are implemented that are=20
> specified there.
>=20
> <https://www.w3.org/TR/dom/#nondocumenttypechildnode>
> <https://www.w3.org/TR/dom/#parentnode>
>=20

Thanks but problem resolved with making a specific ID content editable.


0
justaguy
12/9/2016 1:29:20 AM
On Thursday, December 8, 2016 at 6:25:55 PM UTC-5, JJ wrote:
> On Thu, 8 Dec 2016 13:39:21 -0800 (PST), justaguy wrote:
> 
> > HTML:
> > <table id="TBL">
> >   <!-- ... dynamically inserted TR or TRs without respective ID or IDs -->
> >   <tr id="last10" style="display:none">
> >      <td></td>
> >   </tr>
> > </table>	
> > 
> > Javascript:
> > 	if (document.getElementById('last10').previousSibling) {
> > 		console.log("PreviousSibling EXIST==============");
> > 		document.getElementById('last10').previousSibling.contentEditable = true;
> > 	}
> > 
> > Intention:
> > To make the newly or dynamically inserted area editable. Ignore how they are inserted (it's working).
> > 
> > Outcomes:
> > Firefox version 50 with its console log indicated that the PreviousSibling exits, however, 
> > the new inserted area (TRs and their TDs) is not editable.
> > 
> > Question:
> > What's wrong?
> > 
> > Thanks.
> 
> previousSibling may not be an element node, depending on where you've
> inserted the dynamically created TR element. You don't ignore that.

Thanks.
0
justaguy
12/9/2016 1:29:46 AM
Reply: