google mapをサイト内にとりこめると知って、
挑戦しています。
一応、googleのサイトにあったjavascriptを埋め込んで、
表示できるようになりました。
その中に、

document.createTextNode("~~~~~~~"));

というのがありまして、
~~~のところに文字を入れると、
googleマップに吹き出しが出てメッセージが出るようになります。
~~~の部分が長文になると、吹き出しが横に長くなってしまいます。
改行したいのですが、どうしたらよいのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (2件)

そのコードを見てみないことには正確に言えませんが、とりあえず。



createTextNodeメソッドはテキストノードを作るメソッドなので、そこで改行を宣言することは出来ません。
改行を宣言するには createElement() でbr要素ノードを作ってください。

NG:
document.body.appendChild(document.createTextNode("test\ntest"));

OK:
var node = [document.createTextNode('test'),document.createElement('br'),document.createTextNode('test')];
for(var i=0,max=node.length;i<max;i++){
document.body.appendChild(node[i]);
}

「JavaScript DOM」で検索すると関連情報が見つかります。
HTMLの予備知識があればDOMは比較的理解しやすいと思います。

document.createElement - 指定タグでのエレメント作成 - JavaScriptリファレンス
http://javascriptist.net/ref/document.createElem …
JavaScript : createTextNode
http://www.openspc2.org/JavaScript/reference4/DO …
element.appendChild - 指定要素へ子要素追加 - JavaScriptリファレンス
http://javascriptist.net/ref/element.appendchild …
    • good
    • 0
この回答へのお礼

すみません、回答遅くなりました。
その後、
DOMについて理解を進めまていろいろな事ができるようになりました。
DOMの勉強に時間がかかったため、当質問内容の部分について作成を見送りました。どうもありがとうございました。

お礼日時:2010/01/15 13:38

試したわけではないのですが、改行したい部分に"\n"(半角)または"<BR>"を入れたらどうでしょうか?



例:
document.createTextNode("一行目\n二行目");

ソースコードを見たわけではないので断言はできませんが、どちらかで可能なことかと思います。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJava Scriptによるテキストエリア内での改行

Java Scriptでテキストエリアに文字を書き込む方法で、
フォーム名.テキストエリア名.value = "文字&文字"
と書けば、テキストエリアに文字&文字を書き込んでくれます。
でも、こうすると、改行ができません。

どうすれば、改行ができるようになるのでしょうか?

Aベストアンサー

こんばんは

改行したいところに\nを入れれば良いと思われます。

<HTML>
<SCRIPT LANGUAGE=JavaScript>
<!--
function test()
{
fm.ta.value = "文字\n文字" ;
}
// -->
</SCRIPT>
<FORM NAME=fm>
<TEXTAREA NAME=ta COLS=100 ROWS=10>
</TEXTAREA>
<INPUT TYPE=button NAME=bt VALUE="入力" onClick=test()>
</FORM>
</HTML>

で入力ボタンを押すと

文字
文字

と改行されてテキストエリアに表示されると思います。

Q[Javascript]TEXTAREAで改行させるには?

こんにちは。
name="memo" となっている TEXTAREA があるとします。

document.myForm.memo.value = "aaa";
としましたら aaa が TEXTAREA に表示されます。

今回は・・・
aaa
bbb
というように、間に改行を入れて表示させたいと考えています。

"aaa" と "bbb" の間に改行のコマンド的なものを挟めばいいとは思うのですが・・・

わかりません・・・宜しくお願い致します。

Aベストアンサー

こんにちは

document.myForm.memo.value = "aaa\nbbb";
とすれば良いです。
\nは改行コードです。

ご確認ください。

QTEXTAREA内の改行位置をinnerHTMLで反映させたい

例えば、

<HTML>
<HEAD>
<SCRIPT>
function send(){
var message = f1.message.value
var str = '<HTML>\n<HEAD>\n</HEAD>\n<BODY>\n'
str += ''+ message +'\n'
str += '</BODY>\n</HTML>'
document.frame1.document.body.document.body.innerHTML = str
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="f1">
<TEXTAREA rows="10" cols="40" name="message" onChange="send()"></TEXTAREA>
</FORM>
<IFRAME name="frame1" id="frame1" width="90%" height="350"></IFRAME>
</BODY>
</HTML>


このような記述をして、テキストエリア内に文字を数行にわたって書き込んでも改行はされません。
どのようにすれば改行されるようになりますか?
innerHTMLのところをinnerTEXTとして改行位置に<BR>タグが入るようにするのでもかまわないのですが、、、
どなたかお分かりになる方、ご教授願います。

例えば、

<HTML>
<HEAD>
<SCRIPT>
function send(){
var message = f1.message.value
var str = '<HTML>\n<HEAD>\n</HEAD>\n<BODY>\n'
str += ''+ message +'\n'
str += '</BODY>\n</HTML>'
document.frame1.document.body.document.body.innerHTML = str
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="f1">
<TEXTAREA rows="10" cols="40" name="message" onChange="send()"></TEXTAREA>
</FORM>
<IFRAME name="frame1" id="frame1" width="90%" height="350"></IFRAME>
</BODY>
</HTM...続きを読む

Aベストアンサー

テキストエリア内の改行文字を<BR>に置換します。

str += ''+ message.replace(/\n/g,"<BR>") +'\n'

Q一覧から選択した行の行番号を取得について

はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、btn_selectにalertを入れて選択した行の番号が取得できたかどうか確認したところ、取得できず%{#stat.index}が出力されてしまいます。
どのようにすればボタンを押した行の行番号の取得及びその行のある項目にシステム日付を表示させることができますか?。
宜しくお願いします。

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page pageEncoding="Windows-31J" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib prefix="original" uri="/original-tags" %>
<%@taglib prefix="originalLY" uri="/original-LY-tags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="html-head.jsp" %>
<script type="text/javascript">
function btn_select(indx) {
alert (indx);
}
</script>
</head>
<body>
<%@ include file="HeaderTitle.jsp" %>
<s:form>
<table class="table_line" >
<tr>
<th rowspan=2 class="form_title_list" >選択</th>
<th rowspan=2 class="form_title_list" >A</th>
<th rowspan=2 class="form_title_list" >B</th>
<th rowspan=2 class="form_title_list" >C</th>
<th colspan=2 class="form_title_list" >D</th>
</tr>
<s:iterator value="shinchokuList" status="stat">
<tr>
<s:if test="%{#stat.index % 2 == 0}">
<td class="table_list1"><input type="button" value="選択" name="button"
onclick="btn_select(%{#stat.index});"/></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].A" size="10" maxlength="10" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="sist[%{#stat.index}].B" size="63" maxlength="63" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].C" size="5" maxlength="5" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].D" size="10" maxlength="10" readonly="true" /></td>
<td class="table_list1" ><s:textfield name="List[%{#stat.index}].E" size="10" maxlength="10" readonly="false" cssStyle="%{eErr}"/></td>
</s:if>
</s:else>
</s:iterator>
</table>
</td>
</tr>
</table>
</s:form>
</body>
<html>

はじめまして。
一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたいのですが、うまくいきません。
現在は、btn_selectにalertを入れて選択した行の番号が取得できたかどうか確認したところ、取得できず%{#stat.index}が出力されてしまいます。
どのようにすればボタンを押した行の行番号の取得及びその行のある項目にシステム日付を表示させることができますか?。
宜しくお願いします。

<%@ page contentType="text/html; charset=UTF-8" %>
<%...続きを読む

Aベストアンサー

まず、目的の
「一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたい」
の達成方法についてですが、
行番号を取得する必要はありません。

次に質問内容についてですが、

(1)行番号の取得方法
TRタグのエレメントには、rowIndexというプロパティが用意されています。
それを用いれば行番号を取得できます。
方法としましては、ボタンのINPUTタグから親の親のTRタグを参照します。

具体例を下記に示します。
適当にテキストエディタにコピペして動きを確認してみてください。
**********
<html>
<head><title>rowIndex test</title></head>
<body>
<table border="1" bordercolor="red">
<tr>
<td>
<input type="button" value="zero" onclick="alert(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
<tr>
<td>
<input type="button" value="one" onclick="alert(this.parentNode.parentNode.rowIndex)">
</td>
</tr>
</table>
</body>
</html>
**********

alertの中身についての説明を少々致します。
this・・・INPUTタグ自身をさす。
this.parentNode・・・INPUTタグの親のタグの、TDタグをさす。
this.parentNode.parentNode・・・INPUTタグの親の親のタグの、TRタグをさす。


(2)ボタンが押された行ある項目にシステム日付を表示する方法
こちらの質問に関しましては
上記(1)を一部利用します。
TRタグから対象となるTDタグを参照します。

具体例
**********
<html>
<head>
<title>rowIndex test</title>
<script type="text/javascript">
<!--
today=new Date();
y=today.getFullYear();
m=today.getMonth()+1;
d=today.getDate();

function insertToday(inputElement){
inputElement.parentNode.parentNode.childNodes[1].innerHTML=y+"/"+m+"/"+d;
}
//-->
</script>
</head>
<body>
<table border="1" bordercolor="red">
<tr>
<td style="width:100px">
<input type="button" value="zero" onclick="insertToday(this)">
</td>
<td style="width:100px"></td>
</tr>
<tr>
<td style="width:100px">
<input type="button" value="one" onclick="insertToday(this)">
</td>
<td style="width:100px"></td>
</tr>
</table>
</body>
</html>
**********

少々説明を致します。
childNode[n]・・・そのタグのn番目の子のタグを参照します。
nは、IEでは0から、Firefoxでは1からです。
このソースではchildNodes[1]となっているため、IEでは左から2セル目に格納されます。
Firefoxでは一番左のセルに格納されます。(ボタンは消えます)

まず、目的の
「一覧を表示させて一覧の先頭の選択ボタンを押したした行の行番号の取得し、その行にシステム日付を表示させたい」
の達成方法についてですが、
行番号を取得する必要はありません。

次に質問内容についてですが、

(1)行番号の取得方法
TRタグのエレメントには、rowIndexというプロパティが用意されています。
それを用いれば行番号を取得できます。
方法としましては、ボタンのINPUTタグから親の親のTRタグを参照します。

具体例を下記に示します。
適当にテキストエディタにコピ...続きを読む

QFC2ホームページへのCGIやPHPなどについての質問です。

FC2ホームページへのCGIやPHPなどについての質問です。

FC2ホームページをやっているんですけど、CGIやPHP、JSPが使用できません。
CGIやPHP、JSPなどのメールフォームを追加しようとしたらサーバーへのアップロード中にエラーがでました。FC2ホームページ対応のCGI、PHP、JSPのメールフォームを持っているか無料でダウンロードできるサイトを知っている方は回答よろしくお願いします。

Aベストアンサー

FAQなどをご覧になれば分かると思いますが、無料・有料関係なくFC2ホームページはCGIなどのスクリプトが利用できません。
もし、利用したいのであればFC2レンタルサーバ(有料)を利用してください。
こちらなら利用できます。

どうしても無料のところが良いのであればTOK2やland.to、Ribbonなど対応しているところがあります。
そちらをご利用ください。

QinnerHTML内では改行は禁止?

基本的なことかもしれませんが、JavaScript初心者なので質問させてください。
innerHTML内で改行を入れると実行されないのでしょうか?

たとえば、これ↓はうまく行くのですが、


<script type="text/javascript">
function change1() {
document.getElementById('change1').innerHTML='<p>ハケには毛が多い</p><p>ハゲには毛がない</p><input type="button" value="失礼しました m(_ _)m" />'
}
</script>

<div id="change1">
<p>カラスは黒い</p>
<p>ガラスは透明</p>
<input type="button" value="ここを押すと文章が変わります" onClick="change1();">
</div>


こうすると↓うまく行きません。


<script type="text/javascript">
function change2() {
document.getElementById('change2').innerHTML='
<p>ハケにはやはり毛が多い</p>
<p>ハゲにはやはり毛がない</p>
<input type="button" value="再び失礼しました m(_ _)m" />'
}
</script>

<div id="change2">
<p>カラスは黒い</p>
<p>ガラスは透明、、、じゃないものもある</p>
<input type="button" value="ここを押すと文章が変わります?" onClick="change2();">
</div>

別に困っているわけではないのですが、
ソースは見やすく書きたいのでよろしくお願いします。

基本的なことかもしれませんが、JavaScript初心者なので質問させてください。
innerHTML内で改行を入れると実行されないのでしょうか?

たとえば、これ↓はうまく行くのですが、


<script type="text/javascript">
function change1() {
document.getElementById('change1').innerHTML='<p>ハケには毛が多い</p><p>ハゲには毛がない</p><input type="button" value="失礼しました m(_ _)m" />'
}
</script>

<div id="change1">
<p>カラスは黒い</p>
<p>ガラスは透明</p>
<input type="button" value="ここを押す...続きを読む

Aベストアンサー

JavaScriptでは、1つのコードの途中に改行を入れるとエラーになってしまいます。
なので、指定した文字列などを分割したい場合は、それぞれを+で繋げて分割すればOKです。


<script type="text/javascript">
function change2() {
document.getElementById('change2').innerHTML=
'<p>ハケにはやはり毛が多い</p>' +
'<p>ハゲにはやはり毛がない</p>' +
'<input type="button" value="再び失礼しました m(_ _)m" />'
}
</script>

ご参考まで。

Q「~」の前後に改行を入れたい

ページの中に「~」が会った場合にその前後に改行(<br />)を入れたいです。
javascriptかjqueryでどうにか実現できないでしょうか?

Aベストアンサー

No.4 の補足に対して

querySelectorAll('body *')

<p id=kara> の内部を全部対象とするなら
→ querySelectorAll('p#kara, p#kara *')

<p id=kara> の内部に<a>とか<span>とか<script>があって、
そちらは対象外にしたいなら
→ querySelectorAll('p#kara')


人気Q&Aランキング

おすすめ情報