参考如下代码：
<body>
<div id="div1">what's your name?</div>
<div id="div2">My name is rose.</div>
<button id="btn1">concat()</button><input type="text"><br>
<button id="btn2">slice(3)</button><input type="text"><br>
<button id="btn3">slice(3,6)</button><input type="text"><br>
<button id="btn4">slice(-1)</button><input type="text"><br>
<button id="btn5">substr(3)</button><input type="text"><br>
<button id="btn6">substr(3,6)</button><input type="text"><br>
<button id="btn7">substr(-1)兼容</button><input type="text"><br>
<!-- input框和button按钮之间不能有换行和空格，因为next sibling会把空格或者换行当成自己的兄弟 -->
</body>
</html>
<script>
//获取两个div的内容
var div1 = document.getElementById("div1").innerHTML;
var div2 = document.getElementById("div2").innerHTML;
//封装button的操作
function onbtnclick(id,txt) {
document.getElementById(id).onclick = function() {
this.nextSibling.value = txt;//把txt给input
}
}
onbtnclick("btn1",div1.concat(div2));//连接div1和div2字符串，结果为：what's your name?My name is rose.
onbtnclick("btn2",div1.slice(3));//起始位置为索引号为3 的位置，省略了结束位置，默认截取到最后.
// 结果为：t's your name?
onbtnclick("btn3",div1.slice(3,6));
// 从索引号为3的位置开始截取，索引号为6 的不包括，即从第四个位置到第六个位置，结果为：t's
onbtnclick("btn4",div1.slice(-1));//若是负数。则从右边开始数，结果是?。
onbtnclick("btn5",div1.substr(3));// 结果和slice（3）一样。
onbtnclick("btn6",div1.substr(3,6));//从索引号为3的位置开始截取，截取6个。
onbtnclick("btn7",div1.substr(div1.length-1,1));// 兼容性写法
</script>
上述代码的执行结果：
