在另一个输入内嵌套输入

我一直认为input元素被禁止拥有DOM内容，如here（位于'允许内容'）和here（位于'提示和注释'中）。在另一个输入内嵌套输入

现在我正在一个项目中使用javascript呈现和更改几种不同的输入元素类型（例如，简单的input文本元素和select）。在那个变化的过程中，一个隐藏的input放置在这些元素中，保持当前选定的值。

因此很明显，它是通过jQuery可能将一个input元素添加到另一个输入元件（和使用它之后）：

function doIt() { 
 
    //clear children of parent input 
 
    $('#parentInput').children().remove(); 
 

 
    //create new input and append it to the parent input 
 
    $('<input>').attr({ 
 
    type: 'hidden', 
 
    id: 'testInput', 
 
    value: 'Test value inserted into nested test input' 
 
    }).appendTo($('#parentInput')); 
 
    
 
    //get value of new nested input and write it to output div 
 
    $('#output').html($('#testInput').val()); 
 
} 
 

 
$('#doIt').on('click', doIt);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="Test" id="parentInput"> 
 
<button id="doIt">Do it</button> 
 
<div id="output"></div>

甚至div：

function doIt() { 
 
    //clear children of parent input 
 
    $('#parentInput').children().remove(); 
 

 
    //create new input and append it to the parent input 
 
    $('<div id="testDiv">Test value inserted into nested test div</div>').appendTo($('#parentInput')); 
 
    
 
    //get value of new nested input and write it to output div 
 
    $('#output').html($('#testDiv').html()); 
 
} 
 

 
$('#doIt').on('click', doIt);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" value="Test" id="parentInput"> 
 
<button id="doIt">Do it</button> 
 
<div id="output"></div>

我现在的问题是：当input元素不应该有DOM内容时，为什么通过jQuery（并因此通过纯javascript，因为jQuery只是一个包装）而导致possbile？

来源

2017-08-04 Akerus

有几种类型的输入https://www.w3schools.com/html/html_form_input_types.asp，其中一些我们不放内容，其他的我们放内容。检查链接中的列表。 – MedAli

我不确定这是否与您的问题100％相关，但请查看[Shadow DOM]（https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom）。 –

浏览器支持很多未在W3C/HTML规范中明确表示支持的行为。一般而言，您希望避开这些“功能”，因为它们在不同的浏览器中可能不会相同，或者更糟糕的是，浏览器补丁可能完全改变或破坏其行为。 – jbabey

我一直认为输入元素被禁止拥有DOM内容，如此处所述（在'允许内容'）和此处（在'提示和注释'中）。

您混淆了HTML和DOM。 HTML只是文本。 DOM是浏览器根据该文本创建的内容。

以下是HTML。这是无效的，没有浏览器会从它创建嵌套的节点：

<input type="text" value="Test" id="parentInput"> 
    <div id="testDiv">Test value inserted into nested test div</div> 
</input>

浏览器创建将最有可能看起来像是从这个HTML附带的DOM树：

<input type="text" value="Test" id="parentInput"> 
<div id="testDiv">Test value inserted into nested test div</div>

结束标记被忽略。当谈到解析HTML时，浏览器是宽容的。

如果您直接操作DOM，那么浏览器没有理由阻止该操作。当呈现DOM的时候，浏览器知道如何呈现输入。它并不在乎输入节点是否有子节点。它简单地被忽略。

来源

2017-11-16 11:14:54 zeroflagL

某些浏览器可能（或不可能）支持W3C/HTML规范中未特别支持的行为。通常，您希望避开这些“功能”，因为它们在不同的浏览器中可能不会相同，或者更糟糕的是，浏览器补丁可能会因为它们未被记录而完全改变或破坏它们的行为。

来源

2017-08-10 13:01:11 jbabey

在另一个输入内嵌套输入

回答

相关问题