如何使用javascript替换innerhtml中的值
Posted
技术标签:
【中文标题】如何使用javascript替换innerhtml中的值【英文标题】：how to replace values in innerhtml using javascript 【发布时间】：2015-09-13 16:01:16 【问题描述】：我正在动态地（单击单选按钮）将一行（在表格中）的内部 html 复制到另一行，但在删除一些元素之后。
var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
.replace('<div class="custom-radio" style="margin-top:50px;">',"")
.replace('<label for="shareredio"+e""></label>',"")
.replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
.replace('<label for="sharecheck"+e""></label>',"")
.replace('Share fare',"");
document.getElementById('copyDiv').innerHTML = a;
我对javascript的了解还不够，但是如果有更好的方法，请帮助...
【问题讨论】：
你可以从 DOM 中移除元素，而不是做很多替换。此外，您的 HTML 字符串似乎有很多连接问题。 谢谢... :) @Rory McCrossan 但我可以知道如何... +e 是针对不同行动态生成的变量 你的方法不耐用。我同意@Rory。您应该使用 DOM 来操作您的元素。它更加高效和可追溯。 当我说我对 javascript 不太了解时，为什么人们会投票反对，我是新手。 【参考方案1】：这可能不是最好的方法，但我想我至少会很快给你一个答案。这是使用 jQuery 来操作 DOM。
var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();
var result = $a.html().replace('Share fare', "");
$('#copyDiv').html(result);
【讨论】：
感谢您的解决方案，这工作正常，但有一个问题。我正在将内部 html 从一个表复制到另一个表，您的代码按我想要的方式工作，但它也从父表中删除了元素（我不想要），我只想删除这些元素并复制到子表。是否也有任何解决方案.. 除了它工作得很棒 啊，对了，我没有意识到你不想改变原来的元素。在这种情况下，只需将 .clone() 添加到原始选择器。我已经更新了我的答案给你看。【参考方案2】：这样的？
$(document).ready(function()
$('.copy').on('change', function()
if($('.copy:checked').val() == 'yes')
$('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
$('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
$('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
else
$('.table2').find('.rowContents1').html('');
$('.table2').find('.rowContents2').html('');
$('.table2').find('.rowContents3').html('');
);
);table
border: 1px solid gray;
td, th
border: 1px solid gray;
padding: 5px;
text-align: center;
div
display: inline-block;
margin-right: 20px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
Table1
<table class="table1">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1">This is the Contents of Row 1</td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2">This is the Contents of Row 2</td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3">This is the Contents of Row 3</td>
</tr>
</body>
</table>
</div>
<div>
Table2
<table class="table2">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1"></td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2"></td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3"></td>
</tr>
</body>
</table>
</div>我使用.html() 重写了每个td 中的内容。 .find() 函数只是遍历元素树并找到后代$('.table2').find('.rowContents1') 是说在类.table2 的元素中，找到类.rowContents1 的后代。
希望这会有所帮助，并且是您正在寻找的内容
【讨论】：
感谢您的解决方案....但我实际上正在寻找类似于接受的答案的东西。非常感谢您的时间和帮助，也想为这个答案投票，但没有足够的积分。以上是关于如何使用javascript替换innerhtml中的值的主要内容，如果未能解决你的问题，请参考以下文章
Javascript - 使用 innerHTML 替换 html
Javascript：文档 innerHTML 替换中断表单